各个属性发生的时间:

<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='上传中'
   }
},

element uploads上传文件_文件列表

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在上传失败后触发,返回的后端接口返回的结果