因為升級到新的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武林網。
新聞熱點
疑難解答
