element-ui中的upload组件使用总结

72 阅读 0 评论 48 点赞

我是靠谱客的博主无辜歌曲，最近开发中收集的这篇文章主要介绍element-ui中的upload组件使用总结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

element-ui官网

使用upload组件：

<el-upload
class="upload-demo"
ref="uploadFile"
:on-change="beforeUpload"
:action="uploadUrl"
:headers="myHeader"
:on-remove="handleRemove"
:before-remove="beforeRemove"
:limit="1"
:auto-upload="false"
:on-exceed="handleExceed"
>
<el-button size="small" type="primary">选择文件</el-button>

action: 是请求后端接口的路径（必填的）

header: 是配置请求头的 / 在此处带了token

on-change: 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

on-remove: 是文件列表中移除文件时执行的

before-remove: 删除文件之前执行的，可以用作提示用户二次确认删除

limit: 是上传文件的个数

auto-upload: 是控制是否自动上传的

on-exceed: 上传文件个数超过限制的时候执行的

此处添加的ref是为了在用户点击关闭后清空列表

通过clearFiles方法，这也是element提供的。

addDialogClose(){
this.$refs.ruleForm.resetFields();
this.addClassroomShow = false
this.$refs.upload.clearFiles();
}

在使用时最坑的地方就是action属性不能及时响应数据跟新，总是晚一步。

使用了before-upload、on-progress都不行，数据已经更改，但是action里还是旧的。

研究一下午：

将auto-upload属性设置为false,

然后使用了on-change

在on-change钩子中，去判断文件后缀，来确定文件类型，来确定调用不同的接口

然后通过ref属性去执行上传

beforeUpload(file) {
if(/.(mp4|m3u8|rmvb|avi|swf|3gp)$/.test(file.name)) {
this.ruleForm.uploadUrl = this.vidoeUploadUrl
}else{
this.ruleForm.uploadUrl = this.fileUploadUrl
}
this.$nextTick(()=>{
this.$refs.uploadFile.submit()
})
},

此时就ok了！

如果action是死路径就不需要考虑这些问题了。如果是动态的，就让它异步，或给它加个延时器。

总结：upload组件已经封装的很好了，只是action属性是必填的，有点坑。