如何分隔表单数据和文件字段

Question

我有一个产品表格：

<Create {...this.props}>
    <SimpleForm defaultValue={postDefaultValue}>
        <TextInput source="productName" />
        <ReferenceInput label="Category" source="categoryId" reference="categories">
            <SelectInput optionText="categoryName" />
        </ReferenceInput>
        <TextInput source="price" label="Price"/>
        <ImageInput source="pic" label="Related pictures" accept="image/*">
            <ImageField source="src" title="title" />
        </ImageInput>
    </SimpleForm>
</Create>

在BE端，我有2个API：

一个用于保存产品信息并将生成的产品ID返回给FE，接受json正文（来自表单）：

    {
      "productName": "test",
      "price": 10.99,
      "categoryId": 1
    }

一个用于保存图像，产品ID应该相互关联。

所以我该如何工作？我应该如何处理我的dataProvider？

谢谢大家。

Answer 1

您可以设置两个提供程序，每个API一个。然后，在数据提供程序（您提供给管理员的数据提供程序）中，对于创建帖子的特定情况，将两个调用都链接在一起。

const mainProvider = restServerProvider('url-main-api');
const imgProvider = restServerProvider('url-img-api');

const dataProvider = {
  ...mainProvider,

  create: (resource, params) => mainProvider.update(resource, params)
    .then((results) => {
      const { id } =  results.data; // depends on your API
      return imgProvider.create('posts', { data: { file: params.pic, id } });
    }),
}

您可能还需要先附​​加imgProvider的附加费，才能处理文件上传，see documentation：
const imgProvider = {
  ...restServerProvider('url-img-api'),

  create: (resource, params) => {
    // see file upload example in the documentation
  }  
};