node koa2实现上传图片并且同步上传到七牛云存储

2024-05-06 16:38:45

字体：大中小

来源：转载

供稿：网友

因为升级到新的node版本，之前的通过很多上传图片的方式都已经不适用了，所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得。

废话不多说，下面直接上代码，里面都有注释。

const Koa = require('koa');const route = require('koa-route');const serve = require('koa-static');const inspect = require('util').inspectconst 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：详解React中的组件通信问题

下一篇：本地存储localStorage用法详解