基于antdesign封装一个react的上传组件

项目中遇到了一个上传的需求，看了一下已有的代码很粗糙，而且是直接引用andt的组件，体验不太好，自己使用FormData对象封装了一个上传组件，仅供参考。

代码如下：

javascript 复制代码

  /**
   * FileUploadModal
   * @description - 文件选择上传
   * @param data
   * @return {HTMLDivElement}
   * @author xxx
   */
  FileUploadModal(props) {
    console.log("props", props)
    const { success } = props
    const [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>
          <Upload
            beforeUpload={() => 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的按钮也封装在组件里了，直接引用即可：

javascript 复制代码

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

转载请注明出处