node koa2實現上傳圖片并且同步上傳到七牛云存儲

來源：懂視網責編：小采時間：2020-11-27 22:33:47

node koa2實現上傳圖片并且同步上傳到七牛云存儲

node koa2實現上傳圖片并且同步上傳到七牛云存儲:因為升級到新的node版本，之前的通過很多上傳圖片的方式都已經不適用了，所以自己就寫了一個對于 koa2上傳圖片的小demo,記錄一下心得。廢話不多說，下面直接上代碼，里面都有注釋。 const Koa = require('koa'); const route = requi

推薦度：

點擊下載本文 文檔為doc格式

導讀node koa2實現上傳圖片并且同步上傳到七牛云存儲:因為升級到新的node版本，之前的通過很多上傳圖片的方式都已經不適用了，所以自己就寫了一個對于 koa2上傳圖片的小demo,記錄一下心得。廢話不多說，下面直接上代碼，里面都有注釋。 const Koa = require('koa'); const route = requi

因為升級到新的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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com