toast&axios控制进度条
下面用了react-toastify和axios ,相关包可以在npmjs中搜索到
主要是在axios 提交文件过程中引入一个config ,通过config导出对应的上传进度,通过toast.update修改上传进度条
private onUpload() {
let toastId: any = null
var config = {
onUploadProgress: (progressEvent: any) => {
var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
console.log(this.progress);
this.progress = Number(complete) / 100
if (toastId === null) {
toastId = toast.info(`文件上传中(${this.progress*100}%)`, {
progress: this.progress
});
} else {
console.log(toastId);
toast.update(toastId, {
render: `文件上传中(${this.progress*100}%)`,
progress: this.progress
})
}
}
}
let formData = new FormData(this.formElemUpload)
let file = formData.get('file')
this.api.uploadMetaQuanittyFile(this.props.subprojId, file, config).then(res => {
toast.done(toastId)
})
console.log(this.progress);
}
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭