Admin-on-rest框架中SimpleForm的handleSubmit获取表单数据求助

嘿，我来帮你解决这个问题！你遇到的核心问题是文件无法通过常规JSON请求发送到服务器——因为FileInput和ImageInput返回的是特殊的文件对象，而Admin-on-rest默认的表单提交用JSON格式，没法序列化文件。下面一步步教你处理：

1. 从handleSubmit中获取表单数据 #

自定义handleSubmit时，传入的data参数已经包含了所有表单字段的值，包括文件输入。不过要注意：

• FileInput返回的是一个包含rawFile属性的对象（rawFile才是浏览器原生的File对象）
• ImageInput返回的是一个数组，数组里的每个元素同样包含rawFile属性（即使是单文件上传）

你可以先打印data看看结构：

<SimpleForm handleSubmit={(data) => {
  console.log('完整表单数据:', data);
  // 比如data.yourFileField会是 { rawFile: File, ...其他属性 }
  // data.yourImageField会是 [{ rawFile: File, ... }, ...]
}}>

2. 用FormData封装数据（关键！） #

要上传文件，必须使用FormData对象来封装数据，因为它支持multipart/form-data编码（这是文件上传的标准格式）。下面是完整的自定义提交示例：

import { SimpleForm, TextInput, FileInput, ImageInput, ImageField } from 'admin-on-rest';
import { fetchUtils } from 'admin-on-rest';

const YourCustomForm = (props) => {
  const handleCustomSubmit = (formData) => {
    // 1. 创建FormData实例
    const submitData = new FormData();

    // 2. 添加文本字段
    submitData.append('text_content', formData.text_content);

    // 3. 处理单个FileInput
    if (formData.file_upload) {
      submitData.append('file_upload', formData.file_upload.rawFile);
    }

    // 4. 处理ImageInput（支持单/多文件）
    if (formData.image_upload && formData.image_upload.length > 0) {
      formData.image_upload.forEach((image, index) => {
        // 后端如果支持多文件，可以用类似`image_upload[]`的命名
        submitData.append(`image_upload[${index}]`, image.rawFile);
      });
    }

    // 5. 发送请求到服务器
    return fetchUtils.fetchJson('/your-api-endpoint', {
      method: 'POST',
      body: submitData,
      // 不要手动设置Content-Type！浏览器会自动添加正确的boundary
    })
    .then(response => {
      console.log('提交成功:', response);
      // 调用父组件的成功回调，比如跳转列表页
      props.onSubmitSuccess(response);
    })
    .catch(error => {
      console.error('提交失败:', error);
      props.onSubmitFailure(error);
    });
  };

  return (
    <SimpleForm handleSubmit={handleCustomSubmit} {...props}>
      <TextInput source="text_content" label="文本内容" />
      <FileInput source="file_upload" label="附件上传" />
      <ImageInput source="image_upload" label="图片上传" accept="image/*">
        {/* 必须添加ImageField才能显示预览 */}
        <ImageField source="src" title="图片预览" />
      </ImageInput>
    </SimpleForm>
  );
};

export default YourCustomForm;

3. 进阶：自定义DataProvider处理文件上传 #

如果你想复用Admin-on-rest的dataProvider（比如用默认的create/update方法），可以修改dataProvider来自动处理FormData，这样就不用每个表单都写自定义handleSubmit了：

import { fetchUtils } from 'admin-on-rest';

const apiUrl = 'https://your-api-url.com';
const dataProvider = {
  create: (resource, params) => {
    const url = `${apiUrl}/${resource}`;
    const formData = new FormData();

    // 遍历所有表单字段，自动处理文件和普通数据
    Object.keys(params.data).forEach(key => {
      const value = params.data[key];
      if (Array.isArray(value)) {
        // 处理数组类型（比如多图上传）
        value.forEach((item, idx) => {
          if (item.rawFile) {
            formData.append(`${key}[${idx}]`, item.rawFile);
          } else {
            formData.append(key, item);
          }
        });
      } else if (value && value.rawFile) {
        // 处理单个文件
        formData.append(key, value.rawFile);
      } else {
        // 处理普通文本/数字等
        formData.append(key, value);
      }
    });

    return fetchUtils.fetchJson(url, {
      method: 'POST',
      body: formData,
    });
  },
  // 同理，update方法也可以用同样的逻辑处理
  update: (resource, params) => {
    // 复制create的逻辑即可，只是请求方法改成PUT/PATCH
  },
  // 其他方法（getList, getOne等）保持默认
  getList: (resource, params) => {
    // ...默认实现
  },
  // ...
};

export default dataProvider;

这样修改后，你的SimpleForm直接用默认的handleSubmit就行，dataProvider会自动把表单数据转换成FormData发送。

关键注意点 #

• 不要手动设置Content-Type: multipart/form-data，浏览器会自动添加包含boundary的正确头部，手动设置反而会导致上传失败。
• 后端接口必须支持multipart/form-data格式的请求，并且能正确解析FormData中的文件和文本字段。

内容的提问来源于stack exchange，提问作者Ali Hesari