SpringCloud框架 服务拆分和远程调用

当需要上传文件时，应该使用 FormData 对象来构造请求体。FormData 对象会自动处理 boundary。

注意：不要手动设置 headers: {‘Content-Type’: ‘multipart/form-data’}，因为 FormData 会自动处理，否则会报错 Missing boundary in multipart.

具体代码：

import React, { useState } from "react";
import { UploadOutlined } from '@ant-design/icons';
import { Button, Space, Upload } from 'antd';
import { request } from 'umi';

export default () => {
  const [file, setFile] = useState('');
  const props = {
    name: 'file',
    customRequest(options) {
      const { onSuccess, onError, file: uploadFile } = options;
      console.log(uploadFile);
      // 不实际上传文件，而是存储文件信息
      setFile(uploadFile);
      onSuccess(null, uploadFile); // 伪造一个成功的响应以避免Upload组件显示错误
    },
  };

  const handleUpload = async () => {
    const formData = new FormData();
    formData.append("file", file);
    const info = {
      method: "post",
      body: formData,
    };
    
    await request("/upload", info);
  };

  return (
    <Space>
      <Upload {...props}>
        <Button icon={<UploadOutlined />}>Click to Upload</Button>
      </Upload>
      <Button type="primary" onClick={handleUpload}>上传</Button>
    </Space>
  )
};