項目中遇到了一個上傳的需求，看了一下已有的代碼很粗糙，而且是直接引用andt的組件，體驗不太好，自己使用FormData對象封裝了一個上傳組件，僅供參考。
代碼如下：

  /*** FileUploadModal* @description - 文件選擇上傳* @param data* @return {HTMLDivElement}* @author xxx*/FileUploadModal(props) {console.log("props", props)const { success } = propsconst [fileList, setFileList] = useState(null);const [isModalVisible, setIsModalVisible] = useState(false);const showModal = () => {setIsModalVisible(true);};const handleFileChange = ({ file, fileList: updatedFileList }) => {setFileList(updatedFileList);if (file.status === 'done') {message.success(`${file.name} file uploaded successfully.`);// 文件上傳完畢后清空文件列表setFileList([]);}};// 文件導入const handleUpload = () => {// 在這里處理文件上傳邏輯setIsModalVisible(false);console.log('文件已選擇:', fileList);const formData = new FormData()formData.append('file', fileList[0].originFileObj)// 調用批量上傳接口service.fetchUpload.call(formData, true).then((res) => {return res.json()}).then((res) => {setFileList([])if (res.resCode === 0) {message.success(`"上傳成功"`)success()} else {message.success(`${res.resMsg}`)return}res?.hideIndicator?.()}).catch((err) => {console.log("err", err)ErrorPrompt.openErrorMessage(JSON.parse(err.response).resMsg)})};const handleCancel = () => {setFileList([])setIsModalVisible(false);};return (<><Button type="primary" onClick={showModal}>批量導入</Button><Modal title="批量文件導入" visible={isModalVisible}onOk={handleUpload}onCancel={handleCancel}><p>請選擇文件進行上傳</p><UploadbeforeUpload={() => false} // 禁止自動上傳onChange={handleFileChange}rules={[{ required: true, message: "請上傳文件" }]}valuePropName="fileList"getValueFromEvent={e=>{if(Array.isArray(e)) return e; return e && e.fileList}}fileList={fileList}><Button>選擇文件</Button></Upload></Modal></>);},

使用更簡單，因為把觸發modal的按鈕也封裝在組件里了，直接引用即可：

<FileUploadModal success={() => {   //callback functionxxxRef.current.fetchData()xxxRef.current.setState({selectedRows: [],selectedRowKeys: [],})
}}/>

轉載請注明出處