element 上传组件 el-upload 的经验总结

前言

最近在做后台管理项目,采用的 vue-element-admin ,上传图片是一个很常用的功能,也遇到了很多问题,刚好趁此机会做一些总结。

初步总结下会提到的问题,目录如下:

  1. el-upload 自定义上传方法
  2. 图片上传到七牛云
  3. 图片压缩后再上传(压缩使用 lrz
  4. el-upload 进度条不显示的问题

版本信息:

  • element-ui 2.3.4
  • vue 2.5.10

提示:
由于每个人做的业务不尽相同,所以文章里的代码只是起一个引导作用,提供一个思路,具体可以根据自己的需求来调整。

正文

上传图片到七牛云

这个需要前后端的配合才能实现,这里 是官方的 JavaScript SDK 参考链接。

  • 在使用 JS-SDK 之前,您必须先注册一个七牛帐号,并登录控制台获取一对有效的 AccessKey 和 SecretKey,您可以阅读 快速入门  安全机制 以进一步了解如何正确使用和管理密钥 。
  • JS-SDK 依赖服务端颁发 token,可以通过以下二种方式实现:

    1. 利用七牛服务端 SDK 构建后端服务
    2. 利用七牛底层 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 函数,具体代码见上面的例子。

参考链接:

  1. upload组件的 http:request 怎么获取进度值
  2. 谷歌 axios upload progress 找到的 其一
  3. 谷歌 axios upload progress 找到的 其二

(完)

    原文作者:乐亦栗
    原文地址: https://segmentfault.com/a/1190000019903263
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞