antd upload上传组件如何获取服务端返回数据

对于antd的上传组件，根据官方文档的说明，上传成功后会自动解析服务端返回的数据，并将其设置为上传组件的fileList属性的一项。但有时候，我们需要手动获取服务端返回的数据，这时候可以利用 antd 的customRequest属性和 Promise 对象实现。

customRequest属性用于自定义上传行为，可以接收一个函数作为参数，该函数会在上传时被调用。

示例1：手动获取服务端返回数据

import { Upload, message } from 'antd';

const MyComponent = () => {
  const handleUpload = (file) => {
    return new Promise((resolve, reject) => {
      // 发起上传请求，返回 Promise 对象
      const formData = new FormData();
      formData.append('file', file);
      axios.post('/api/upload', formData).then(res => {
        // 上传成功后，手动将服务端返回值设置为当前文件的值
        file.response = res.data;
        resolve(file);
      }).catch(err => {
        message.error('上传失败');
        reject(err);
      });
    });
  };

  const handleChange = ({ fileList }) => {
    console.log(fileList[0].response); // 手动获取服务端返回的数据
  }

  return (
    <Upload customRequest={handleUpload} onChange={handleChange}>
      点击上传
    </Upload>
  );
};

在这个示例中，我们手动创建了一个 Promise 对象，并在其完成时将服务端返回值设置为当前文件的response属性。这样，在handleChange函数里，我们就可以手动获取fileList里每个文件的response属性，从而得到服务端返回的数据。

示例2：手动控制文件上传

import { Upload, Button } from 'antd';

const MyComponent = () => {
  const [isUploading, setIsUploading] = useState(false);
  const [fileList, setFileList] = useState([]);

  const handleUpload = () => {
    setIsUploading(true);
    Promise.all(
      fileList.map(file => 
        new Promise((resolve, reject) => {
          // 发起上传请求，返回 Promise 对象
          const formData = new FormData();
          formData.append('file', file);
          axios.post('/api/upload', formData).then(res => {
            // 上传成功后，手动将服务端返回值设置为当前文件的值
            file.response = res.data;
            resolve(file);
          }).catch(err => {
            reject(err);
          });
        })
      )
    ).then(files => {
      setIsUploading(false);
      setFileList(files);
      message.success('上传成功');
    }).catch(err => {
      setIsUploading(false);
      message.error('上传失败');
    });
  };

  const handleRemove = (file) => {
    const index = fileList.indexOf(file);
    const newFileList = fileList.slice();
    newFileList.splice(index, 1);
    setFileList(newFileList);
  }

  return (
    <>
      <Upload fileList={fileList} onRemove={handleRemove}>
        <Button disabled={isUploading}>选择文件</Button>
      </Upload>
      <Button disabled={isUploading} onClick={handleUpload}>上传</Button>
    </>
  );
};

在这个示例中，我们手动控制文件上传的过程，将上传按钮和文件列表分别放到了两个组件里。在点击上传按钮时，我们需要对每个文件发起一个上传请求，并使用Promise.all等待所有请求完成。在请求完成后，我们可以手动获取每个文件的服务端返回值，并将上传结果设置为当前文件的值。