饿了么UI el-upload http-request 多文件进度条失效

<el-upload
            drag
            multiple
            class="drawing-upload"
            show-file-list
            :action="FileModel.uploadObjectUrl"
            :http-request="httpRequest"
            :limit="50"
            :file-list="fileList"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-error="handleError"
            :before-upload="beforeUpload"
            :on-exceed="exceed"
        >
            <div class="upload-handle-text">
                <div class="el-icon-upload" />
                <div class="upload-tips">拖拽或上传图纸文件</div>
            </div>
</el-upload>
/**
* 自定义上传
*/
httpRequest (file) {
const formData = new FormData()
formData.append('file', file.file)
const extension = file.file.name.indexOf('.') > -1
? `.${file.file.name.split('.').pop()}`
: ''
// http-request 进度条
if (uploadSetting.zip.indexOf(extension) > -1) {
// FileModel.compressPackageFilterUpload为封装的axios
return FileModel.compressPackageFilterUpload(formData, this.supportFileType, {
onUploadProgress: (progressEvent) => {
const num = progressEvent.loaded / progressEvent.total * 100 | 0
file.onProgress({ percent: num })
}
})
} else {
// FileModel.uploadObject为封装的axios
return FileModel.uploadObject(formData, {
onUploadProgress: (progressEvent) => {
const num = progressEvent.loaded / progressEvent.total * 100 | 0
file.onProgress({ percent: num })
}
})
}
},

// 上传文件(表单上传,MultipartFile形式),返回文件对象
uploadObject (formData, config) {
// 注意文件系统不需要加 apis 前缀
return request.post(`${methodsPrefix}/file-systems/multipart-file/file-system`, formData, {
headers: { 'Content-Type': 'multipart/form-data' },
...config
})
}

el-upload 使用 http-request的时候,进度条会不显示。要想显示进度条,所以在http-request的时候要加上onUploadProgress监听进度,然后调用饿了么的文件对象file.onProgress({ percent: num })更新进度,

有必要的话还需要调用file.onSuccess()方法更新文件上传成功状态

原文地址:https://www.cnblogs.com/kaibo520/p/14980702.html