前言
最近在做后台管理项目, 采用的 vue-element-admin , 上传图片是一个很常用的功能, 也遇到了很多问题, 刚好趁此机会做一些总结.
初步总结下会提到的问题, 目录如下:
el-upload 自定义上传方法
图片上传到七牛云
图片压缩后再上传 (压缩使用 lrz)
el-upload 进度条不显示的问题
版本信息:
- element-ui 2.3.4
- vue 2.5.10
提示:
由于每个人做的业务不尽相同, 所以文章里的代码只是起一个引导作用, 提供一个思路, 具体可以根据自己的需求来调整.
正文
上传图片到七牛云
这个需要前后端的配合才能实现, 这里 是官方的 JavaScript SDK 参考链接.
在使用 JS-SDK 之前, 您必须先注册一个七牛帐号, 并登录控制台获取一对有效的 AccessKey 和 SecretKey, 您可以阅读 快速入门 和 安全机制 以进一步了解如何正确使用和管理密钥 .
JS-SDK 依赖服务端颁发 token, 可以通过以下二种方式实现:
利用七牛服务端 SDK 构建后端服务
利用七牛底层 API 构建服务, 详见七牛上传策略和上传凭证
前端通过接口请求以获得 token 信息
前端需要去拿到后端生成的 token 才可以上传图片.
自定义上传, 上传前可压缩
http-request 属性可以覆盖默认的上传行为, 自定义上传的实现.
主要来看一下这个自定义的函数的代码实现:
- // 自定义的上传实现函数
- handleHttpRequest(req) {
- // uid 作为唯一标识, 方便上传完成后精准地替换图片 url
- const uid = req.file.uid
- // 获取文件后缀名的函数
- const ext = getFileExt(req.file.name)
- // 自定义 key , 上传时对图片的重命名会用到
- let keyname = this.$formatDate(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * 1000) + '.' + ext
- // 压缩图片
- let newFile = null
- lrz(req.file, {
- quality: 0.7
- }).then(rst => {
- // 压缩完成
- newFile = rst.file
- // 创建 form 对象, 上传七牛云所需要的参数
- const fileData = new FormData()
- fileData.append('file', newFile)
- fileData.append('token', this.token)
- fileData.append('key', keyname)
- const config = {
- headers: { 'Content-Type': 'multipart/form-data' },
- // 这一段代码解决进度条不显示的问题, 属于 axios 的使用知识. 具体可以看文末的参考链接.
- onUploadProgress: progressEvent => {
- const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
- req.onProgress({ percent: percentCompleted })
- }
- }
- // 请求七牛云的接口, 具体看自己怎么配置
- // 这里的 action 是请求地址, fileData 是请求发送的内容, config 是 http 的相关配置
- // 官方的请求地址可以查看这个链接: https://developer.qiniu.com/kodo/manual/1671/region-endpoint
- axios.post($config[this.bucket].action, fileData, config).then(res => {
- const url = `${$config[this.bucket].domain}/${res.data.key}`
- // 修改 url
- this.fileList.forEach((item) => {
- if (item.uid === uid) {
- item.url = url
- }
- })
- req.onSuccess(res)
- }).catch(err => {
- req.onError(err)
- })
- }).catch(err => {
- console.log(err)
- })
- }
压缩图片
这里直接采用前人造的轮子, 可以设置压缩比例和图片的尺寸限制.
想看更多细节的话地址在 这里 , 上面代码里也有用到, 但是这个轮子作者已经不再维护了.
el-upload 进度条不显示
使用自定义上传后, 我发现 el-upload 自带的进度条显示失效了, 这个问题查找了比较久, 一开始一直不知道应该在哪里去监听 progress 事件.
参考链接里的顺序就是我思考的顺序.
先是去查了下官方的 issue , 意识到是监听 process 的问题, 然后就想 axios 是不是有相关的设置呢? 毕竟我这里是用 axios 发请求的, 所以又谷歌直接搜关键词「axios upload progress」, 找到了一些相关的信息, 就是在 config 里去配置 onUploadProgress 函数, 具体代码见上面的例子.
参考链接:
upload 组件的 http:request 怎么获取进度值
谷歌 axios upload progress 找到的 其一
谷歌 axios upload progress 找到的 其二
(完)
来源: http://www.jianshu.com/p/550ccc9d1455