位置: IT常识 - 正文
使用element-ui中的el-upload自定义上传(elemental ui)
编辑：rootadmin推荐整理分享使用element-ui中的el-upload自定义上传(elemental ui)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:elementui怎么用,element ui,element-ui dialog,element_ui,elemental ui,elemental ui,element_ui,elementui怎么用,内容如对您有帮助，希望把文章链接给更多的朋友！
日常开发系统的时候，我们都会有上传文件的功能。但是用原生的文件上传是很繁琐的，那么我们都会选择使用UI组件库，如element-plus、ant-design等。这些UI组件库是非常容易上手且实用的，但是万恶的需求是奇怪多变的，我们单纯使用组件库默认的上传方式是不符合我们的需求的，如不自动上传、上传各个阶段时进行监听等，那这个时候我们使用 自定义上传 就显得肥肠合适。
正文：我遇到的问题是选择阶段进行文件信息获取并进行特殊处理，并处理成手动上传，于是我很果断选择自定义上传来处理。下面直接放代码。
<el-uploadclass="upload-demo"ref="xlsUpload"action="":show-file-list="false":file-list="fileList":http-request="handleFileUpload">上传</el-upload>当我们使用 自定义上传 的时候，需要两步
1.把 action 赋值为空字符串 2.添加 :http-request"
当我们完成上面两步时，那么我们就可以在 http-request 对应的回调函数进行逻辑处理： 下面我简单写了一些常用的判断
// 自定义上传事件handleFileUpload({ file }) {// file里面包含所选择的文件信息// 如果文件类型不符合xls|xlsx，也可以进行其他的判断if (file.name.slice(-3) != "xls" && file.name.slice(-4) != "xlsx") {this.$message.error("上传文件只能是 XLS | XLSX 格式!");return false; }else{// 通过URL.createObjectURL可以获取文件的真实url，需要slice是因为前缀有blob:const fileUrl = URL.createObjectURL(file).slice(5)// 类型通过则把文件变成formData的形式，因为文件一般是formData数据const formData = new FormData();formData.append('file',file);// 发送网络请求... } },就这么简单的就可以实现自定义上传，不再限制于UI组件库自带的上传方式，so easy。
结尾：以上就是如何实现自定义上传的方法，很简单吧哈哈哈。觉得可以就帮忙点个赞。
最后整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。 有需要的小伙伴，可以点击文末卡片领取这份文档，无偿分享
部分文档展示：
文章篇幅有限，后面的内容就不一一展示了
有需要的小伙伴，可以点下方卡片免费领取
上一篇：【JavaScript】手撕前端面试题：手写Object.create | 手写Function.call | 手写Function.bind(javascript中文手册)
下一篇：【Vue】vuex-五个核心(vuex五个核心概念)
