element 上传组件 el-upload 的经验总结
前言
最近在做后台管理项目,采用的 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
,可以通过以下二种方式实现:前端通过接口请求以获得
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
函数,具体代码见上面的例子。
参考链接:
(完)
element 上传组件 el-upload 的经验总结的更多相关文章
- vuetify | vue | 文件上传组件 | file | upload | form input[type="file"]
今天无聊地写vuecli3听歌的时候,遇到了上传文件到Django的自我需求,然后就到vuetify的表单组件里找upload btn,发现居然没有!!! 顿时惊了个呆,要知道之前用element做操 ...
- ASP中文件上传组件ASPUpload介绍和使用方法
[导读]要实现该功能,就要利用一些特制的文件上传组件.文件上传组件网页非常多,这里介绍国际上非常有名的ASPUpload组件 1 下载和安装ASPUpload 要实现该功能,就要利用一些特制的文件上 ...
- 封装Vue Element的upload上传组件
本来昨天就想分享封装的这个upload组件,结果刚写了两句话,就被边上的同事给偷窥上了,于是在我全神贯注地写分享的时候他就神不知鬼不觉地突然移动到我身边,腆着脸问我在干啥呢.卧槽你妈,当场就把我吓了一 ...
- 页面中使用多个element-ui upload上传组件时绑定对应元素
elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? ...
- element-ui upload上传组件问题记录
element-ui upload上传组件遇到的问题
- 封装react antd的upload上传组件
上传文件也是我们在实际开发中常遇到的功能,比如上传产品图片以供更好地宣传我们的产品,上传excel文档以便于更好地展示更多的产品信息,上传zip文件以便于更好地收集一些资料信息等等.至于为何要把上传组 ...
- Vue.js 3.0搭配.NET Core写一个牛B的文件上传组件
在开发Web应用程序中,文件上传是经常用到的一个功能. 在Jquery时代,做上传功能,一般找jQuery插件就够了,很少有人去探究上传文件插件到底是怎么做的. 简单列一下我们要做的技术点和功能点 使 ...
- 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
- ajax上传组件
BJUI框架的异步上传组件功能. 初始化: 1.Data属性:div添加属性data-toggle="upload"后可触发上传组件. 示例代码: <div class=&q ...
随机推荐
- hadoop之hive高级操作
在输出结果较多,需要输出到文件中时,可以在hive CLI之外执行hive -e "sql" > output.txt操作 但当SQL语句太长或太多时,这种方式不是很方便,可 ...
- 高性能嵌入式核心板新标杆!米尔推出基于NXP i.MX8M处理器的MYC-JX8MX核心板
随着嵌入式及物联网技术的飞速发展,高性能计算的嵌入式板卡已经成为智能产品的基础硬件平台.为响应行业应用和满足客户需求,米尔电子推出基于NXP公司i.MX8M系列芯片的开发平台MYD-JX8MX系列开发 ...
- 警惕SAP项目被“中间商赚差价”
前段时间某买卖二手车的广告特别火,里面有一句话叫“没有中间商赚差价”特别有说服力.同样在做SAP项目的过程中也是要警惕各种“中间商”赚差价. 正常的SAP项目的都是甲方和乙方两边签署合同合作实施,并不 ...
- 我所理解的Vue——学习心得体会1(Vue对象)
初学Vue,总结如下: 1.首先要区分html的dom和js的dom 2.html的dom是View的范畴,js的dom是Model的范畴. 3.vue这库就是创建了伟大的new Vue()对象,把h ...
- Spring Cloud Gateway使用
简介 Spring Cloud Gateway是Spring Cloud官方推出的网关框架,网关作为流量入口,在微服务系统中有着十分重要的作用,常用功能包括:鉴权.路由转发.熔断.限流等. Sprin ...
- Spring Boot2(三):使用Spring Boot2集成Redis缓存
前言 前面一节总结了SpringBoot实现Mybatis的缓存机制,但是实际项目中很少用到Mybatis的二级缓存机制,反而用到比较多的是第三方缓存Redis. Redis是一个使用ANSI C编写 ...
- Storm 学习之路(八)—— Storm集成HDFS和HBase
一.Storm集成HDFS 1.1 项目结构 本用例源码下载地址:storm-hdfs-integration 1.2 项目主要依赖 项目主要依赖如下,有两个地方需要注意: 这里由于我服务器上安装的是 ...
- Spring+Redis配置
既上次把同事屁屁龙的tomcat数据源文档摘抄过来之后,这次获得其同意后,再次怀着感激涕零的心情,抄个爽. 全文非本人所写,所以若转载时,请标明文章来源于本人原创(不要脸真爽哈哈哈哈),谢谢! 1.j ...
- 使用CocoaPods创建自己的私有库-iOS组件化第一步
目前iOS组件化常用的解决方案是Pod+路由+持续集成,通常架构设计完成后第一步就是将原来工程里的模块按照架构图分解为一个个独立的pod工程(组件),今天我们就来看看如何创建一个Pod私有库. 新建: ...
- 02-三种Bean装配机制(三)
在前两篇中分别介绍了自动化装配机制和通过JavaConfig类进行装配,接下来介绍下通过XML装配bean,其实就目前趋势来看,这种方式用的越来越少(不是我说的,是作者说的,喜欢这种方式的别喷我