vue+koa做图片上传
2019-09-29 本文已影响0人
随风飞2019
vue图片上传，使用elementui上传组件
前端选择图片后，立即上传（也可以手动上传）
后台koa监听请求路由，处理数据，将上传的图片生成一个url返回给前端
前端将url，连同别的数据一并提交给后端，写入数据库
vue前端代码部分
<el-upload
action="http://localhost:3001/api/upload" //上传图片的地址
list-type="picture-card" //选择后缩略图展示
multiple //允许选择多图
:on-preview="preview" //点击查看图片预览的处理方法
:on-success="afterSuccessUpload" //自动上传成功后的回调
>
<i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible"> //下面是图片缩略图部分
<img width="100%" :src="dialogImageUrl" alt />
</el-dialog>
methods方法：
preview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
afterSuccessUpload(file) {
console.log(file) //上传成功后，后台会返回前台一个图片链接，把这个链接后续写入数据库
},
下面是koa后台的处理方法，需要使用koa-multer插件
一般会先去封装一个upload方法，放到models目录里，供后续代码使用
koa后台路由监听post的上传请求，然后通过调用upload方法，处理上传文件，生成链接，返回给前端
首先是封装upload.js代码部分
const multer = require('koa-multer')
const path=require("path");
const destPath=path.join(__dirname,"../uploadImgs");
//配置
var storage = multer.diskStorage({
//文件保存路径
destination: function (req, file, cb) {
cb(null, destPath)
},
//修改文件名称
filename: function (req, file, cb) {
var fileFormat = (file.originalname).split("."); //以点分割成数组，数组的最后一项就是后缀名
cb(null, Date.now() + "." + fileFormat[fileFormat.length - 1]);
}
})
//加载配置
var upload = multer({
storage: storage,
limits: {
fileSize: 1024*1024/2 // 限制512KB
}
});
module.exports=upload;
将上述模块暴露出去以后，koa路由处理方法，就可以使用了
koa后台监听post请求，将图片上传后生成链接返回前端
const upload = require("../models/upload.js")
router.post('/upload', upload.single('file'), async (ctx, next) => {
ctx.body = {
filename: ctx.req.file.filename
}
})
这样前端就会获得一个图片链接，前端和别的数据一并传给后端，写入数据库
·······························································································
下面是vue+koa上传到七牛云的案例
前端要上传图片到七牛云，需要有一个token进行授权操作
难点在于要使用后端koa生成一个token授权给前端
每次需要上传前，前端向后端申请一个token
前端直传图片到七牛云，七牛云返回前端一个图片url
前端把url连同别的信息，一并提交给后台，写入数据库
第一，服务端颁发上传凭证到前端，前端携带凭证，采用“客户端直传”的方式直接上传到七牛云。
先写后端部分吧，需要使用到官方提供的node.js sdk
1. 安装七牛云依赖 npm i qiniu
2. 在api模块引入七牛云 const qiniu = require("qiniu");
生成token部分代码如下
router.get("/getuploadtoken", async (ctx, next) => {
const accessKey = 'MxExXov-'; //秘钥管理中的AK
const secretKey = 'ETapkF'; //秘钥管理中的SK
const bucket = "vueimgs"; //创建的存储空间文件夹名字
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey);
const options = {
scope: bucket,
expires: 3600 * 24, //过期时间
};
const putPolicy = new qiniu.rs.PutPolicy(options);
const uploadToken = putPolicy.uploadToken(mac);
ctx.body = uploadToken; //当前端请求获得token的时候，就把生成的token返回给前端
})
vue前端部分
<el-upload
action="http://upload.qiniup.com" //这个地址，和七牛上创建时选择的区域有关
list-type="picture-card"
:on-preview="preview"
:on-success="afterSuccessUpload"
:data="postData"
>
<i class="el-icon-plus"></i>
</el-upload>
其中的 :data="postData"是用来放七牛云的token的
data里面需要放一个postData: { token:"" }
created里面进入即调用一个methods里面定义的方法，获取token的方法
getUploadToken(){
this.$http.get("/getuploadtoken")
.then(res=>{
this.postData.token=res.data;
})
}
一进入上传页面，即请求token
afterSuccessUpload(res) {
this.form.img = "http://py0mg402k.bkt.clouddn.com/" + res.key;
},
选中图片后直接上传，上传后七牛返回给前端一个res，把bucket文件url+res.key即可生成图片链接
