这里有新鲜出炉的 Node.js 教程,程序狗速度看过来!
Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的 易于扩展的网络应用 · Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 运行在分布式设备 的 数据密集型 的实时应用
这篇文章主要介绍了 node koa2 实现上传图片并且同步上传到七牛云存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
因为升级到新的 node 版本,之前的通过很多上传图片的方式都已经不适用了,所以自己就写了一个对于 koa2 上传图片的小 demo, 记录一下心得。
废话不多说,下面直接上代码,里面都有注释。
- const Koa = require('koa');
- const route = require('koa-route');
- const serve = require('koa-static');
- const inspect = require('util').inspect
- const path = require('path')
- const os = require('os')
- const fs = require('fs')
- const Busboy = require('busboy')
- const qiniu = require('qiniu')
- const qiniuConfig = require('./qiniuconfig')
- const app = new Koa();
- app.use(serve(__dirname + '/public/'));
- // 写入目录
- const mkdirsSync = (dirname) => {
- if (fs.existsSync(dirname)) {
- return true
- } else {
- if (mkdirsSync(path.dirname(dirname))) {
- fs.mkdirSync(dirname)
- return true
- }
- }
- return false
- }
- function getSuffix (fileName) {
- return fileName.split('.').pop()
- }
- // 重命名
- function Rename (fileName) {
- return Math.random().toString(16).substr(2) + '.' + getSuffix(fileName)
- }
- // 删除文件
- function removeTemImage (path) {
- fs.unlink(path, (err) => {
- if (err) {
- throw err
- }
- })
- }
- // 上传到七牛
- function upToQiniu (filePath, key) {
- const accessKey = qiniuConfig.accessKey // 你的七牛的accessKey
- const secretKey = qiniuConfig.secretKey // 你的七牛的secretKey
- const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
- const options = {
- scope: qiniuConfig.scope // 你的七牛存储对象
- }
- const putPolicy = new qiniu.rs.PutPolicy(options)
- const uploadToken = putPolicy.uploadToken(mac)
- const config = new qiniu.conf.Config()
- // 空间对应的机房
- config.zone = qiniu.zone.Zone_z2
- const localFile = filePath
- const formUploader = new qiniu.form_up.FormUploader(config)
- const putExtra = new qiniu.form_up.PutExtra()
- // 文件上传
- return new Promise((resolved, reject) => {
- formUploader.putFile(uploadToken, key, localFile, putExtra, function (respErr, respBody, respInfo) {
- if (respErr) {
- reject(respErr)
- }
- if (respInfo.statusCode == 200) {
- resolved(respBody)
- } else {
- resolved(respBody)
- }
- })
- })
- }
- // 上传到本地服务器
- function uploadFile (ctx, options) {
- const _emmiter = new Busboy({headers: ctx.req.headers})
- const fileType = options.fileType
- const filePath = path.join(options.path, fileType)
- const confirm = mkdirsSync(filePath)
- if (!confirm) {
- return
- }
- console.log('start uploading...')
- return new Promise((resolve, reject) => {
- _emmiter.on('file', function (fieldname, file, filename, encoding, mimetype) {
- const fileName = Rename(filename)
- const saveTo = path.join(path.join(filePath, fileName))
- file.pipe(fs.createWriteStream(saveTo))
- file.on('end', function () {
- resolve({
- imgPath: `/${fileType}/${fileName}`,
- imgKey: fileName
- })
- })
- })
- _emmiter.on('finish', function () {
- console.log('finished...')
- })
- _emmiter.on('error', function (err) {
- console.log('err...')
- reject(err)
- })
- ctx.req.pipe(_emmiter)
- })
- }
- app.use(route.post('/upload', async function(ctx, next) {
- const serverPath = path.join(__dirname, './uploads/')
- // 获取上存图片
- const result = await uploadFile(ctx, {
- fileType: 'album',
- path: serverPath
- })
- const imgPath = path.join(serverPath, result.imgPath)
- // 上传到七牛
- const qiniu = await upToQiniu(imgPath, result.imgKey)
- // 上存到七牛之后 删除原来的缓存图片
- removeTemImage(imgPath)
- ctx.body = {
- imgUrl: `http://xxxxx(你的外链或者解析后七牛的路径)/${qiniu.key}`
- }
- }));
- app.listen(3001);
- console.log('listening on port 3001');
然后在同一级目录下,创建一个 public 文件夹,然后在下面新建一个 index.html,因为我们上面已经把这个文件夹设置为静态访问文件夹了, public/index.html 的代码为
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <input id="btn1" type="file" name="file" />
- <input id="btn2" type="submit" value="提交" />
- </body>
- <script>
- var btn1 = document.querySelector('#btn1') var btn2 = document.querySelector('#btn2') var file = null btn1.addEventListener('change',
- function(e) {
- file = e.target.files[0]
- })
- btn2.onclick = function() {
- var _data = new FormData();
- _data.append('file', file);
- xhr(_data)
- }
- var xhr = function(formdata) {
- var xmlHttp = new XMLHttpRequest();
- xmlHttp.open("post", "http://127.0.0.1:3001/upload", true);
- xmlHttp.send(formdata);
- xmlHttp.onreadystatechange = function() {
- if (xmlHttp.readyState == 4) {
- if (xmlHttp.status == 200) {
- var data = xmlHttp.responseText;
- console.log(data);
- }
- }
- }
- }
- </script>
- </html>
选择好图片,然后点击提交,就可以上传到你的七牛空间啦!
源代码在 github: https://github.com/naihe138/koa-upload
来源: http://www.phperz.com/article/17/0812/343917.html