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

前端之家收集整理的这篇文章主要介绍了node koa2实现上传图片并且同步上传到七牛云存储前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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(你的<a href="https://www.jb51.cc/tag/wailian/" target="_blank" class="keywords">外链</a>或者解析后<a href="https://www.jb51.cc/tag/qiniu/" target="_blank" class="keywords">七牛</a>的路径)/${qiniu.key}
}
}));

app.listen(3001);

console.log('listening on port 3001');

然后在同一级目录下,创建一个public文件夹,然后在下面新建一个 index.html,因为我们上面已经把这个文件夹设置为静态访问文件夹了, public/index.html 的代码

<Meta charset="UTF-8"> Document

选择好图片,然后点击提交,就可以上传到你的七牛空间啦!

代码在 github: https://github.com/naihe138/koa-upload

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/nodejs/37464.html

猜你在找的Node.js相关文章