前言

最近在做后台管理项目,采用的 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 属性可以覆盖默认的上传行为,自定义上传的实现。

主要来看一下这个自定义的函数的代码实现:

  1. // 自定义的上传实现函数
  2. handleHttpRequest(req) {
  3. // uid 作为唯一标识,方便上传完成后精准地替换图片 url
  4. const uid = req.file.uid
  5. // 获取文件后缀名的函数
  6. const ext = getFileExt(req.file.name)
  7. // 自定义 key ,上传时对图片的重命名会用到
  8. let keyname = this.$formatDate(new Date(), 'yyyyMMddhhmmss') + Math.floor(Math.random() * 1000) + '.' + ext
  9. // 压缩图片
  10. let newFile = null
  11. lrz(req.file, {
  12. quality: 0.7
  13. }).then(rst => {
  14. // 压缩完成
  15. newFile = rst.file
  16. // 创建form对象,上传七牛云所需要的参数
  17. const fileData = new FormData()
  18. fileData.append('file', newFile)
  19. fileData.append('token', this.token)
  20. fileData.append('key', keyname)
  21. const config = {
  22. headers: { 'Content-Type': 'multipart/form-data' },
  23. // 这一段代码解决进度条不显示的问题,属于 axios 的使用知识。具体可以看文末的参考链接。
  24. onUploadProgress: progressEvent => {
  25. const percentCompleted = Math.floor((progressEvent.loaded * 100) / progressEvent.total)
  26. req.onProgress({ percent: percentCompleted })
  27. }
  28. }
  29. // 请求七牛云的接口,具体看自己怎么配置
  30. // 这里的 action 是请求地址,fileData 是请求发送的内容,config 是 http 的相关配置
  31. // 官方的请求地址可以查看这个链接:https://developer.qiniu.com/kodo/manual/1671/region-endpoint
  32. axios.post($config[this.bucket].action, fileData, config).then(res => {
  33. const url = `${$config[this.bucket].domain}/${res.data.key}`
  34. // 修改 url
  35. this.fileList.forEach((item) => {
  36. if (item.uid === uid) {
  37. item.url = url
  38. }
  39. })
  40. req.onSuccess(res)
  41. }).catch(err => {
  42. req.onError(err)
  43. })
  44. }).catch(err => {
  45. console.log(err)
  46. })
  47. }

压缩图片

这里直接采用前人造的轮子,可以设置压缩比例和图片的尺寸限制。

想看更多细节的话地址在 这里 ,上面代码里也有用到,但是这个轮子作者已经不再维护了。

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 找到的 其二

(完)

element 上传组件 el-upload 的经验总结的更多相关文章

  1. vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]

    今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...

  2. ASP中文件上传组件ASPUpload介绍和使用方法

    [导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload  要实现该功能,就要利用一些特制的文件上 ...

  3. 封装Vue Element的upload上传组件

    本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...

  4. 页面中使用多个element-ui upload上传组件时绑定对应元素

    elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...

  5. element-ui upload上传组件问题记录

    element-ui upload上传组件遇到的问题

  6. 封装react antd的upload上传组件

    上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...

  7. Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件

    在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...

  8. 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  9. ajax上传组件

    BJUI框架的异步上传组件功能. 初始化: 1.Data属性:div添加属性data-toggle="upload"后可触发上传组件. 示例代码: <div class=&q ...

随机推荐

  1. 使用LinkedList模拟一个堆栈或者队列数据结构。

    堆栈:先进后出 First in last out filo 队列:先进先出 First in last out filo使用LinkedList的方法,addFirst addLast getFir ...

  2. Mybatis_three

    延迟加载 实现多对一的延迟加载(association) 例如下面的:有很多个账户信息(招商\工商\农商)是属于一个用户人的 [需求] 查询账户(Account)信息并且关联查询用户(User)信息. ...

  3. spring boot 2.x 系列 —— spring boot 整合 redis

    文章目录 一.说明 1.1 项目结构 1.2 项目主要依赖 二.整合 Redis 2.1 在application.yml 中配置redis数据源 2.2 封装redis基本操作 2.3 redisT ...

  4. spring 5.x 系列第5篇 —— 整合 mybatis + druid 连接池 (xml配置方式)

    源码Gitub地址:https://github.com/heibaiying/spring-samples-for-all 项目目录结构 1.创建maven工程,除了Spring基本依赖外,还需要导 ...

  5. 【设计模式】行为型03观察者模式(Observer Pattern)

    记得16年初第一次学习了23种设计模式,但是除了少数几个简单的外,其他的很多都是学了个似懂非懂,以至于有人问起甚至说不上来,现在想想,其实就是没看懂而已.例如观察者模式,其实原理很简单,但是当时并没有 ...

  6. python学习 -女神或者男神把微信消息撤回后好慌,有了这个妈妈再也不担心你看不到女神或者男神撤回的消息了(超详解)

    简介 有时候在忙工作,女朋友发了一个消息,就撤回了,但是人天生的都有一颗好奇心,而且在当今这个时代找个女朋友不容易,一个程序猿找一个女朋友更是不容易的.人家好不容易跟你,你还不得把人家当老佛爷侍候着, ...

  7. Windows和linux环境下按文件名和字符串搜索命令

    Windows 1.遍历C盘下所有txt 命令:for /r c:\ %i in (*.txt) do @echo %i 注释:for 循环的意思 /r 按照路径搜索 c:\ 路径 %i in   ( ...

  8. POJ 3581:Sequence(后缀数组)

    题目链接 题意 给出n个数字的序列,现在让你分成三段,使得每一段翻转之后拼接起来的序列字典序最小.保证第一个数是序列中最大的数. 例如样例是{10, 1, 2, 3, 4},分成{1, 10}, {2 ...

  9. Java程序运行原理分析

    class文件内容 class文件包含Java程序执行的字节码 数据严格按照格式紧凑排列在class文件的二进制流,中间无分割符 文件开头有一个0xcafebabe(16进制)特殊的标志 JVM运行时 ...

  10. Java学习笔记之---面向对象

    Java学习笔记之---面向对象 (一)封装 (1)封装的优点 良好的封装能够减少耦合. 类内部的结构可以自由修改. 可以对成员变量进行更精确的控制. 隐藏信息,实现细节. (2)实现封装的步骤 1. ...