解决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);
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章