antd自定義上傳customRequest時,無法正常顯示上傳成功狀態,一直在上傳的loading狀態中。
antd官方API中自定義上傳參數customRequest介紹:
調用onSuccess解決問題:
代碼事例:
customRequest = (options)=>{
console.log(options);
let params = new FormData();
params.append("file", options.file);
this.props.ajax.post(`/admin/sys-file/upload`, params, {headers: {'Content-Type': 'multipart/form-data'}}).then((res)=>{
options.onSuccess(res, options.file);
})
}
分析:
查看參數options的詳細信息:
可以發現onProgress事件與onSuccess事件,onProgress是上傳進度相關的,onSuccess是上傳成功監聽事件。
- 設置進度條相關監聽,解決進度條顯示不正常的問題:
onUploadProgress: ({ total, loaded }) => {
onProgress({ percent: Math.round(loaded / total * 100).toFixed(2) }, file);
}
- 調用onSuccess事件,解決loading一直加載的問題:
onSuccess(response, file);