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

koa2 后端代码

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

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

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

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

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

1.  
   module.exports={
2.  
   json(code,msg,data){
3.  
   return data?{
4.  
   code,msg,data
5.  
   }:{
6.  
   code,msg
7.  
   }
8.  
   }
9.  
   }

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

1.  
   //引入上一步新建的配置文件
2.  
   const QINIU = require("../utils/QiniuConfig");
3.  
   // 上传到七牛
4.  
   let qiniu = require("qiniu"); // 需要加载qiniu模块的
5.  
    
6.  
   const upToQiniu = (filePath, key) => {
7.  
   //引入你的 Access Key 和 Secret Key
8.  
   qiniu.conf.ACCESS_KEY = QINIU.accessKey;
9.  
   qiniu.conf.SECRET_KEY = QINIU.secretKey;
10.  
     
11.  
    //构建上传策略函数
12.  
    function uptoken(bucket, key) {
13.  
    var putPolicy = new qiniu.rs.PutPolicy(bucket ":" key);
14.  
    return putPolicy.token();
15.  
    }
16.  
     
17.  
    //生成上传 Token
18.  
    let token = uptoken(QINIU.bucket, key);
19.  
    var extra = new qiniu.io.PutExtra();
20.  
     
21.  
    return new Promise((resolved, reject) => {
22.  
    qiniu.io.putFile(token, key, filePath, extra, function (err, ret) {
23.  
    if (!err) {
24.  
    // 上传成功， 处理返回值
25.  
    resolved(ret.key);
26.  
    } else {
27.  
    // 上传失败， 处理返回代码
28.  
    reject(err);
29.  
    }
30.  
    });
31.  
    });
32.  
    };
33.  
    module.exports = {
34.  
    upToQiniu
35.  
    };

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

1.  
   const router = require("koa-router")();
2.  
   router.prefix("/upload"); //我的父路由 访问路径就为 xxxxx/upload/uploadImg
3.  
   const { json } = require("../utils/JsonResult"); //返回json对象格式
4.  
    
5.  
   let uuid = require("uuid");
6.  
   const func = require("../service/upload");
7.  
   const multer = require("koa-multer");
8.  
    
9.  
   const storage = multer.diskStorage({ });
10.  
     
11.  
    const limits = {
12.  
    fields: 10, //非文件字段的数量
13.  
    fileSize: 500 * 1024, //文件大小
14.  
    files: 1, //文件数量
15.  
    };
16.  
     
17.  
    const upload = multer({ storage, limits });
18.  
     
19.  
    router.post("/uploadImg", upload.single("file"), async (ctx, next) => {
20.  
    try {
21.  
    const file = ctx.req.file
22.  
    if (file) {
23.  
    const fileName = uuid.v1();
24.  
    // 获取上传文件扩展名
25.  
    const ext = file.originalname.split(".").pop();
26.  
    // 命名文件以及拓展名
27.  
    const fileUrl = `public/${fileName}.${ext}`;
28.  
     
29.  
    const result = await func.upToQiniu(file.path, fileUrl);
30.  
    console.log(result);
31.  
     
32.  
    if (result) {
33.  
    ctx.body = json(200, "添加成功", result);
34.  
    } else {
35.  
    ctx.body = json(500, "上传失败", "success");
36.  
    }
37.  
    } else {
38.  
    ctx.body = json(500, "没有选择图片", "success");
39.  
    }
40.  
    } catch (err) {
41.  
    console.log(err);
42.  
    ctx.body = json(500, "添加失败");
43.  
    }
44.  
    });
45.  
     
46.  
    module.exports = router;

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

 Vue3 Element-Plus 前端代码

1、页面区

1.  
   <el-upload class="avatar-uploader" accept=".jpg,.png,.jpeg" :action="uploadApi"
2.  
   :show-file-list="false" :on-success="handleAvatarSuccess" :headers="header">
3.  
   <img v-if="imgUrl" :src="baseUrl imgUrl" class="avatar" />
4.  
   <el-icon v-else class="avatar-uploader-icon">
5.  
   <Plus />
6.  
   </el-icon>
7.  
   </el-upload>

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

2、js代码区 

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

3、css代码区

1.  
   .avatar-uploader .avatar {
2.  
   width: 178px;
3.  
   height: 178px;
4.  
   display: block;
5.  
   }
6.  
    
7.  
   .avatar-uploader .el-upload {
8.  
   border: 1px dashed var(--el-border-color);
9.  
   border-radius: 6px;
10.  
    cursor: pointer;
11.  
    position: relative;
12.  
    overflow: hidden;
13.  
    transition: var(--el-transition-duration-fast);
14.  
    }
15.  
     
16.  
    .avatar-uploader .el-upload:hover {
17.  
    border-color: var(--el-color-primary);
18.  
    }
19.  
     
20.  
    .el-icon.avatar-uploader-icon {
21.  
    font-size: 28px;
22.  
    color: #8c939d;
23.  
    width: 178px;
24.  
    height: 178px;
25.  
    text-align: center;
26.  
    }

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

这篇好文章是转载于：学新通技术网