记录umi-request上传文件的坑

umi-request上传文件的坑

想试试umi.js开发，在上传文件的时候遇到了问题。页面效果是应该简单的上传文件：

可是，当我按照官方的示例，进行配置时，

官方示例：

import { Upload, message } from 'antd';
import { useRequest } from 'umi';

export default () => {
  const { data, loading, run } = useRequest((file) => {
    const formData = new FormData();
    formData.append('file', file);
    return {
      url: 'http://127.0.0.1:7001/upload',
      method: 'post',
      data: formData,
    };
  });

  const handleChange = (info) => {
    if (info.file.status !== 'uploading') {
      run(info.file);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 文件上传成功！`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 文件上传失败！`);
    }
  };

  return (
    <>
      <Upload
        name="file"
        showUploadList={false}
        onChange={handleChange}
        headers={{ 'Content-Type': 'multipart/form-data' }}
      >
        <Button icon={<UploadOutlined />}>点击上传</Button>
      </Upload>
    </>
  );
};

发现：

使用FormData(), 并不会自动添加header。需要手动添加headers。

最终代码：

import { Upload, message } from 'antd';
import { useRequest } from 'umi';

export default () => {
  const { data, loading, run } = useRequest((file) => {
    const formData = new FormData();
    formData.append('file', file);
    return {
      url: 'http://127.0.0.1:7001/upload',
      method: 'post',
      data: formData,
      headers: { 'Content-Type': 'multipart/form-data' },
    };
  });

  const handleChange = (info) => {
    if (info.file.status !== 'uploading') {
      run(info.file);
    }
    if (info.file.status === 'done') {
      message.success(`${info.file.name} 文件上传成功！`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} 文件上传失败！`);
    }
  };

  return (
    <>
      <Upload
        name="file"
        showUploadList={false}
        onChange={handleChange}
      >
        <Button icon={<UploadOutlined />}>点击上传</Button>
      </Upload>
    </>
  );
};

希望这篇记录能够帮助到遇到同样问题的朋友。