在使用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方法都没有执行?
没有触发可能有以下几个原因:
“on-progress”方法仅在上传正在进行时触发。如果上传已经完成,则不会调用该方法。
服务器可能没有发送任何进度更新。一些服务器可能不提供进度信息,这意味着‘on-progress’方法将不会被调用。
“进行中”方法可能无法正确实现。确保正确定义了方法,并且正确链接到了上载组件。
浏览器可能正在阻止进度事件。如果启用了某些安全功能,某些浏览器可能会阻止调用"on-progress"方法。尝试禁用任何可能干扰上传的浏览器扩展或安全功能。
上传的文件可能太小,进度更新不明显。如果文件很小,进度条可能更新太快,无法调用“on-progress”方法。
为了进一步解决此问题,检查浏览器控制台是否有任何错误消息,或查阅ElementUI文档和社区论坛以获得其他指导,可能会有所帮助。