vue+koa做图片上传

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即可生成图片链接

上传地址，参考 (官方文档)
token生成，参考官方文档
感谢前辈的文档，EsunR，
陌上兮月