vue3 + element-plus + koa2 实现图片上传至七牛云

koa2 后端代码

准备工作： 安装  koa-multer koa-qiniu koa-uuid

命令： npm i koa-multer koa-qiniu koa-uuid -S

1、新建utils文件夹 新建QiniuConfig.js 文件 存放七牛云配置信息

let QINIU  = {};
QINIU.accessKey = 'xxx'; //七牛的accessKey
QINIU.secretKey = 'xxx'; //七牛的secretKey
QINIU.bucket = 'xxx';  //存储空间的名字
module.exports = QINIU;

  建完QiniuConfig.js 文件，再继续在utils里创建JsonResult.js文件统一返回格式

module.exports={
    json(code,msg,data){
        return data?{
            code,msg,data
        }:{
            code,msg
        }
    }
}

2、新建service文件夹 新建upload.js文件

//引入上一步新建的配置文件
const QINIU = require("../utils/QiniuConfig");
// 上传到七牛
let qiniu = require("qiniu"); // 需要加载qiniu模块的
 
const upToQiniu = (filePath, key) => {
  //引入你的 Access Key 和 Secret Key
  qiniu.conf.ACCESS_KEY = QINIU.accessKey;
  qiniu.conf.SECRET_KEY = QINIU.secretKey;
 
  //构建上传策略函数
  function uptoken(bucket, key) {
    var putPolicy = new qiniu.rs.PutPolicy(bucket + ":" + key);
    return putPolicy.token();
  }
 
  //生成上传 Token
  let token = uptoken(QINIU.bucket, key);
  var extra = new qiniu.io.PutExtra();
 
  return new Promise((resolved, reject) => {
    qiniu.io.putFile(token, key, filePath, extra, function (err, ret) {
      if (!err) {
        // 上传成功， 处理返回值
        resolved(ret.key);
      } else {
        // 上传失败， 处理返回代码
        reject(err);
      }
    });
  });
};
module.exports = {
  upToQiniu
};

3、router文件夹 新建路由文件upload.js

const router = require("koa-router")();
router.prefix("/upload"); //我的父路由 访问路径就为 xxxxx/upload/uploadImg
const { json } = require("../utils/JsonResult"); //返回json对象格式
 
let uuid = require("uuid");
const func = require("../service/upload");
const multer = require("koa-multer");
 
const storage = multer.diskStorage({ });
 
const limits = {
  fields: 10, //非文件字段的数量
  fileSize: 500 * 1024, //文件大小
  files: 1, //文件数量
};
 
const upload = multer({ storage, limits });
 
router.post("/uploadImg", upload.single("file"), async (ctx, next) => {
  try {
    const file = ctx.req.file
    if (file) {
      const fileName = uuid.v1();
      // 获取上传文件扩展名
      const ext = file.originalname.split(".").pop();
      // 命名文件以及拓展名
      const fileUrl = `public/${fileName}.${ext}`;
 
      const result = await func.upToQiniu(file.path, fileUrl);
      console.log(result);
 
      if (result) {
        ctx.body = json(200, "添加成功", result);
      } else {
        ctx.body = json(500, "上传失败", "success");
      }
    } else {
      ctx.body = json(500, "没有选择图片", "success");
    }
  } catch (err) {
    console.log(err);
    ctx.body = json(500, "添加失败");
  }
});
 
module.exports = router;

后端代码就到这了，访问路径为 xxxx/upload/uploadImg，如果前端报401就记得带上token，还有一种写法是七牛云2021写的文档，但是我这个是2019旧版写法简单明了
 

 Vue3+Element-Plus 前端代码

1、页面区

accept：限制上传类型
show-file-list：禁止多选

2、js代码区 

//图片上传api地址
let uploadApi = 'http://localhost:3000/upload/uploadImg'
 
//图片基本路径 自己七牛云配置的加速域名 没有域名就使用你服务器的ip
let baseUrl = 'http://www.xxx.com/'
 
//头部携带token 我登录时将token存在缓存中 现在取出来
let header = { Authorization: "Bearer " + sessionStorage.getItem('token') }
 
let imgUrl=ref(null)
 
//上传成功调用的函数 成功就将成功的路径赋值给 imgUrl 渲染
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    imgUrl = response.data
}

3、css代码区

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
 
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}
 
.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}
 
.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

我采用的方式 baseUrl + imgUrl ，后端仅返回成功的文件名，前端统一配置 baseUrl ，这样加上后端返回的 imgUrl 就能渲染，后续存入数据库也只是存 imgUrl