Ant Design Upload 自定义上传 customRequest

在Ant Design中，你可以使用customRequest属性来自定义文件上传的行为。这个属性接受一个函数，该函数会接收一个包含action、directory、data和filename的对象，以及一个onSuccess和onError的回调函数。

以下是一个使用customRequest的例子：

import React from 'react';
import { Upload, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
 
function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  return isJpgOrPng || Upload.LIST_IGNORE;
}
 
function customRequest(options) {
  const { onSuccess, onError, file, onProgress } = options;
 
  const formData = new FormData();
  formData.append('file', file);
 
  // 使用你喜欢的方式上传文件，例如使用axios
  fetch('your-upload-api', {
    method: 'POST',
    body: formData,
    onUploadProgress: ({ total, loaded }) => {
      onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) });
    },
  })
    .then(() => {
      onSuccess('upload success');
    })
    .catch(() => {
      onError('upload failed');
    });
}
 
function App() {
  return (
    <Upload
      customRequest={customRequest}
      beforeUpload={beforeUpload}
      name="file"
      action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    >
      <button style={{ border: '1px solid #d9d9d9', padding: 10 }}>
        <UploadOutlined /> Upload
      </button>
    </Upload>
  );
}
 
export default App;

在这个例子中，我们定义了一个customRequest函数，它会创建一个FormData对象，将文件附加到该对象，然后使用fetch API发送请求。你可以根据需要替换上传逻辑，例如使用axios或其他HTTP客户端。beforeUpload函数用于检查文件类型。

请注意，你需要根据你的API端点更新action属性。在这个例子中，我使用了一个模拟的API端点https://www.mocky.io/v2/5cc8019d300000980a055e76，你应该替换为你自己的上传API。