React-admin：一次将多个图像上传到 s3

Question

我正在尝试为一个嵌入了其他实体数组（具有另一层深度）的实体制作一个单一形式的创建页面。允许（但不要求）所有实体和嵌入实体附加图像。图片输入使用自定义 api 平台端点将图片上传到 AWS s3，然后 returns 生成 URL，根据文本字段将其复制到。当我创建具有单个图像字段的实体时，它的工作方式正是我想要的。

我的图片上传器：

（欢迎批评我检查图像是否发生变化的方式 - 我很高兴学习）

const ImageUploader = () => (
    <>
      <ImageInput source="imageUpload" label="image">
        <ImageField source="imageUpload" title="title"/>
      </ImageInput>
      <ImageInput source="imageChecker" label="" options={{hidden: true}}> 
      </ImageInput>
      <TextInput source="image" label="Image path"/>
      <FormDataConsumer>
        {
          ({formData}) => {
            if (typeof formData === 'undefined' || typeof formData.imageUpload === 'undefined') {
              return;
            }
            if (formData.imageChecker === null || formData.imageUpload !== formData.imageChecker) {
              formData.imageChecker = formData.imageUpload;
              formData.image = getImagePath(formData.imageUpload);
            }
          }
        }
      </FormDataConsumer>
    </> 
);

问题是什么：

问题是每当我在 Create 字段中有多个 ImageUploader 字段时，将图像上传到其中一个上传器会复制所有其他上传器和文本输入的效果。图片本身也会上传到所有图片上传者。

包含多个图片上传者的表单示例：

const FooBarCreate = props => (
    <CreateGuesser {...props}>

        ...

        <ImageUploader/>

        <ArrayInput fullWidth={true}  source="Foo">
            <SimpleFormIterator>

                ...

                <ImageUploader/>

                <ArrayInput fullWidth={true}   label="Bar" source="Bar">
                    <SimpleFormIterator>

                        ...

                        <FormDataConsumer>
                            {
                               some logic unrelated to images
                            }
                        </FormDataConsumer>
                    </SimpleFormIterator>
                </ArrayInput>
            </SimpleFormIterator>
        </ArrayInput>
    </CreateGuesser>
);

我的猜测是程序无法识别我试图将值分配给哪个字段，因为它们的源名称都是 image，我不知道如何解决这个问题。

我尝试过的：

用 <SimpleForm> 标签包围 ImageUploader 而不是空标签，运气不好，只在各处生成 save 按钮。

Answer 1

原因是您的多个ImageInput共享同一个源"imageUpload"。 React-admin 依赖 source 来读取和修改表单数据。所以当一个ImageInput改变时，其他的都随之改变。

您需要为 inside 定义不同的来源。最简单的方法是从外部传递源前缀属性。

像这样：

<ImageUploader source="image1" />

const ImageUploader = ({source, ...props}) => (
    <>
      <ImageInput source=`${source}imageUpload` label="image">
        <ImageField source="imageUpload" title="title"/>
      </ImageInput>
      <ImageInput source=`${source}imageChecker` label="" options={{hidden: true}}/>
      <TextInput source=`${source}image` label="Image path"/>
    <>
)

React-admin：一次将多个图像上传到 s3

React-admin : Multiple image upload to s3 at once

upload

amazon-s3

api-platform.com

react-admin

我的图片上传器：

问题是什么：

包含多个图片上传者的表单示例：

我尝试过的：