antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)

更新時(shí)間：2023年02月12日 13:44:51 作者：wo_dxj

這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

antd upload上傳組件獲取服務(wù)端返回?cái)?shù)據(jù)

項(xiàng)目中使用到antd upload組件上傳的問(wèn)題，按照官網(wǎng)示例，獲取不到返回的值，后面上去GitHub找了找解決辦法，

在upload返回值中，文件會(huì)有一個(gè)狀態(tài)：status為done或者error的時(shí)候會(huì)返回一個(gè)response字段，這個(gè)字段里面會(huì)包含接口返回的數(shù)據(jù)，因此只需要坐下過(guò)濾就可以拿到值了

我是這樣解決的

上面的判斷可以過(guò)濾掉，哪個(gè)是判斷多張上傳出錯(cuò)的時(shí)候給一個(gè)提示，因?yàn)閍ntd upload組件多張上傳會(huì)走多次beforeupload方法，會(huì)提示多次。

回歸正題，這樣判斷之后就可以拿到對(duì)應(yīng)的數(shù)據(jù)，數(shù)據(jù)的處理就看自己的了，但是需要注意的就是如果是自己自定義的數(shù)據(jù)，數(shù)據(jù)中必須要有uid字段，不然會(huì)報(bào)錯(cuò)。

還有就是上傳的時(shí)候會(huì)多次走upload方法，每一次都需要給你的filelist賦值，不然后續(xù)的upload方法就不會(huì)走，也就不會(huì)調(diào)取接口了.

antd的upload上傳組件uploading狀態(tài)踩坑記

說(shuō)明

在使用Antd 的 Upload 組件的onChange()方法中，打印fileList 中的文件狀態(tài)status 一直是 uploading,無(wú)法拿到上傳文件后服務(wù)端響應(yīng)的內(nèi)容，且組件下方不顯示文件列表問(wèn)題

以下是解決方法：

const Dragger = Upload.Dragger;
constructor(props) {
        super(props);
        this.state = {
            fileList: [],
        };
    }
<Dragger
                        listType={"picture"}
                        action={uploadUrl}
                        accept={acceptPictype}
                        disabled={upLoadDisabled}
                        beforeUpload={() => {
                        }}
                        fileList={isScanSuccess?[]:this.state.fileList}
                        onChange={
                            (data) => {
                                console.log(data)
                                const { fileList, file } = data;
                             		//自己的邏輯
                                    this.setState({ fileList: [...fileList] });//這段代碼放在處理邏輯的最后面  
                                }                           
                            }
                        }
                    >
在github[解答](https://github.com/ant-design/ant-design/issues/2423)上此問(wèn)題解答：

對(duì)于受控模式，你應(yīng)該在 onChange 中始終 setState fileList，保證所有狀態(tài)同步到 Upload 內(nèi)。類(lèi)似這里的寫(xiě)法：http://ant.design/components/upload/#components-upload-demo-fileList

// good  正確寫(xiě)法

onFileChange(fileList) {
  if ( ... ) {
    ...
  } else {
    ...
  }
  // always setState
  this.setState({ fileList: [...fileList] });
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />
// bad 寫(xiě)法
onFileChange(fileList) {
  if ( ... ) {
    this.setState({ fileList: [...fileList] });
  } else {
    ...
  }
}
<Upload fileList={this.state.fileList} onChange={this.onFileChange} />
建議研習(xí)受控組件概念：https://facebook.github.io/react/docs/forms.html#controlled-components
注意需要克隆 fileList 以保障 Upload 能感知數(shù)組變化。
- this.setState({ fileList });
+ this.setState({ fileList: [...fileList] });