如何在选择图片时上传至自定义API并将返回URL写入记录

解决方案 #

核心思路是通过自定义ImageInput的上传逻辑，结合表单上下文的setValue方法直接更新表单字段，确保上传后接口返回的URL被写入record。

步骤1：引入表单上下文 #

使用useFormContext获取表单的setValue方法，用于手动更新record中的图片URL字段。

步骤2：编写自定义上传函数 #

实现上传逻辑，将文件提交到/upload API，获取返回的URL后构造ImageInput所需的数据结构，并更新表单字段。

步骤3：配置ImageInput #

将自定义上传函数传入ImageInput的upload属性，替换默认上传行为。

修改后的完整代码 #

import { Edit, SimpleForm, TextInput, ImageInput, ImageField, useFormContext } from 'react-admin';
import { Title } from './Title';
import { CategoryEditActions } from './CategoryEditActions';
import { Aside } from './Aside';
import { CustomToolbar } from './CustomToolbar';

function CategoryEdit() {
  const { setValue } = useFormContext();

  // 自定义图片上传逻辑
  const customUpload = async (file) => {
    const formData = new FormData();
    formData.append('file', file);

    try {
      const response = await fetch('/upload', {
        method: 'POST',
        body: formData,
        // 若API需要认证，添加对应请求头，示例：
        // headers: {
        //   Authorization: `Bearer ${localStorage.getItem('authToken')}`
        // }
      });

      if (!response.ok) throw new Error('图片上传失败');
      const result = await response.json();

      // 构造ImageInput所需的数据结构，src为接口返回的URL
      const imageData = { 
        src: result.url, // 假设接口返回的URL字段为url
        title: file.name 
      };

      // 更新表单中的image字段，确保record同步
      setValue('image', imageData);
      return imageData;
    } catch (error) {
      console.error('上传出错:', error);
      throw error; // 抛出错误让ImageInput显示错误状态
    }
  };

  return (
    <Edit
      title={<Title page="Category" title="name" />}
      actions={<CategoryEditActions />}
      aside={<Aside />}
    >
      <SimpleForm toolbar={<CustomToolbar />}>
        <TextInput source="id" disabled label="ID" fullWidth />
        <TextInput source="name" required fullWidth />
        <TextInput source="description" multiline fullWidth />
        <ImageInput 
          source="image" 
          label="Image" 
          accept="image/*"
          upload={customUpload} // 绑定自定义上传函数
        >
          <ImageField source="src" title="title" />
        </ImageInput>
      </SimpleForm>
    </Edit>
  );
}

export default CategoryEdit;

关键说明 #

• useFormContext的作用：直接获取表单的状态更新方法setValue，绕过ImageInput默认的内部处理，确保编辑态的record能被正确修改。
• 上传函数的返回值：必须返回包含src和title的对象，这是ImageInput和ImageField约定的数据结构，用于预览图片。
• 错误处理：上传失败时抛出错误，ImageInput会自动显示错误提示，提升用户体验。
• URL处理：如果接口返回的是相对路径，可根据实际域名拼接为绝对URL，例如src: window.location.origin + result.url。

内容的提问来源于stack exchange，提问作者Swalih K