elementui上传组件使用on-progress方法为什么不触发？

Question

在使用elementui上传组件，给上传添加进度条，使用on-progress方法为什么不触发？

 <el-upload class="idCard1" :action="define.comUploadUrl + '/' + files.type" :headers="uploadHeaders"
                list-type="picture-card" :show-file-list="false" accept=".JPG, .png, .jpeg" multiple="multiple"
                :http-request="beforeAvatarUpload" :auto-upload="true" :on-change="idenImghandleChange"
                :on-progress="handleUploadProgress">
                <img v-if="ImgFront" :src="define.comUrl + ImgFront" class="avatar" style="width:100%;height:100%">
                <div class="el-progress-wrapper" slot="progress">
                  <el-progress type="circle" :percentage="uploadPercent" />
                </div>
 </el-upload>

  async Back(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      formData.append('idCard', this.IdCard)
      formData.append('type', this.files.type)
      let result = await getBackcard(formData)
      if (result.code === 200) {
        this.ImgBack = result.data.url
        this.fileList.push(result.data)
        this.$emit('input', this.fileList)
        this.$emit('change', this.fileList)
      }
    },
   beforeAvatarUpload(file) {
       this.Back(file)
    },
    handleUploadProgress(event, file, fileList) {
      console.log(event, file, fileList);
      this.uploadPercent = event.percent
    }

这个handleUploadProgress方法都没有执行？

Answer 1

没有触发可能有以下几个原因:

1. “on-progress”方法仅在上传正在进行时触发。如果上传已经完成，则不会调用该方法。

2. 服务器可能没有发送任何进度更新。一些服务器可能不提供进度信息，这意味着‘on-progress’方法将不会被调用。

3. “进行中”方法可能无法正确实现。确保正确定义了方法，并且正确链接到了上载组件。

4. 浏览器可能正在阻止进度事件。如果启用了某些安全功能，某些浏览器可能会阻止调用"on-progress"方法。尝试禁用任何可能干扰上传的浏览器扩展或安全功能。

5. 上传的文件可能太小，进度更新不明显。如果文件很小，进度条可能更新太快，无法调用“on-progress”方法。

为了进一步解决此问题，检查浏览器控制台是否有任何错误消息，或查阅ElementUI文档和社区论坛以获得其他指导，可能会有所帮助。