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、页面区
<el-upload class="avatar-uploader" accept=".jpg,.png,.jpeg" :action="uploadApi" :show-file-list="false" :on-success="handleAvatarSuccess" :headers="header"> <img v-if="imgUrl" :src="baseUrl imgUrl" class="avatar" /> <el-icon v-else class="avatar-uploader-icon"> <Plus /> </el-icon> </el-upload>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
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeacgf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01