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

Neilyo 发布于2019-08-26 10:24 / 2511人阅读

摘要：正文上传图片到七牛云这个需要前后端的配合才能实现，这里是官方的参考链接。参考链接组件的怎么获取进度值谷歌找到的其一谷歌找到的其二完

前言

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

初步总结下会提到的问题，目录如下：

el-upload 自定义上传方法

图片上传到七牛云

图片压缩后再上传（压缩使用 lrz）

el-upload 进度条不显示的问题

版本信息：

element-ui 2.3.4

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

正文 上传图片到七牛云

这个需要前后端的配合才能实现，这里是官方的 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 找到的其二

（完）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106128.html

element-ui+vue-cli3.0：el-upload

摘要：最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对的上传组件的一些改造，点击查看源码。最近项目中涉及很多文件上传的地方，然后文件上传又有很多限制。比如文件大小限制，文件个数限制，文件类型限制，文件上传后的列表样式自定义，包括上传进度条等问题。下面是我对element-u...

yy13818512006 2019-08-23 13:50 评论0 收藏0
window系统下 element----el-upload上传插件中的accept属性不生效

摘要：我写的代码设置的为类型点击上传只能上传文件，每次最多上传个，且总容量不可超过在系统里面显示在系统中显示最后我在中做了一层判断，不是文件为我写的代码设置的accept为pdf类型点击上传只能上传pdf文件，每次最多上传10个，且总容量不可超过30M 在mac系统里面显示showImg(https://segmentfault.com/img/bVbtAlQ);在window系统...

Freelander 2019-08-23 17:59 评论0 收藏0
vue导入处理Excel表格功能步骤实例

　　1. 前言　　本篇文章就是为大家讲讲前端导入并处理excel表格的情况，顺便讲讲vue导入并处理excel数据；也总结下使用工具。　　2.vue导入Excel表格　　vue导入Excel表格主要有两种常用的方法，一个是借助ElementUI文件上传进行表格导入，另一个是自带的input做文件上传；以下对两个方法做详细介绍；　　2.1 使用ElementUI中的upload组件　　安装Eleme...

3403771864 2022-11-29 09:16 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

Imfan 2019-08-02 11:51 评论0 收藏0