node koa2实现上传图片并且同步上传到七牛云存储
程序员文章站
2022-11-26 14:42:18
因为升级到新的node版本，之前的通过很多上传图片的方式都已经不适用了，所以自己就写了一个对于 koa2上传图片的小demo,记录一下心得。
废话不多说，下面直接上代码，...
因为升级到新的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:
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。