解決antd upload自定義上傳customRequest,上傳時一直loading加載的問題

antd自定義上傳customRequest時,無法正常顯示上傳成功狀態,一直在上傳的loading狀態中。
loading
antd官方API中自定義上傳參數customRequest介紹:
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);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章