各个属性发生的时间:
<el-upload
ref="upload"
:before-upload="beforeUploads"
:accept="accepts"
:data="finalData"
:headers="Headers"
:on-change="beforeUploadFile"
:on-success="uploadSuccess"
:on-progress="onUpload"
:on-error="onUploadError"
multiple
:limit="1"
drag
:action="uploadFileUrl"
:auto-upload="false"
:on-remove="fileRemoveList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
:on-change事件是在文件拖拽或打开后触发的事件,可以在该事件中限制文件大小,如下限制文件大小为10G,超过则清空文件:
const isLt10G = file.size / 1024 / 1024 < 10240
if (!isLt10G) {
this.$message.error('上传文件大小不能超过 10G!');
const uploadDragger = document.querySelector('.el-upload-dragger')
uploadDragger.style.display = 'block'
this.isbolock = true
this.uploadText='上传'
this.$refs.upload.clearFiles()
this.$refs.upload.abort()
this.$forceUpdate();
} else {
this.isbolock = false
}
on-remove事件是移除上传文件列表后触发的,可以进行按钮的隐藏显示等操作
const uploadDragger = document.querySelector('.el-upload-dragger')
uploadDragger.style.display = 'block'
this.isupload = false
on-progress事件是上传中触发的事件,第一个参数为触发的事件,返回的有上传进度文件大小等属性,第二个参数为上传的文件列表
onUpload(event,file,fileList){
console.log(event,file,fileList,'上传中');
if(event.percent==100){
this.uploadText='验证中'
}else{
this.uploadText='上传中'
}
},
before-upload事件在调用上传接口前触发
accept 上传的文件接收的类型
accepts: '.zip'
action 上传文件的接口路径:
uploadFileUrl: '/api/v1/data',
data 上传接口携带的参数
headers 上传接口headers参数
手动触发提交事件,给el-upload标签创建ref属性
this.$nextTick(() => {
this.$refs.upload.submit()
})
自动触发提交事件,auto-upload设置为true即可
:auto-upload="false"
on-success在文件上传成功后触发,返回的后端接口返回的结果
on-error在上传失败后触发,返回的后端接口返回的结果