React-admin：一次将多张图片上传到s3

Question

我正在尝试为具有嵌入的其他实体数组（具有另一层深度）的实体创建一个表单的创建页面。允许（但不是必需）所有实体和嵌入式实体都附加有映像。图像输入使用自定义api平台终端节点将图像上传到AWS s3，然后返回生成的URL，该URL将根据文本字段复制到该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>
    </> 
);

是什么问题：

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

我的具有多个图像上传器的表单示例：

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，我不知道如何解决。

我尝试过的：

• 用ImageUploader标签代替<SimpleForm>而不是没有运气的空标签，只在整个位置生成save按钮。

Answer 1

原因是您的多个ImageInput共享相同的源“ imageUpload”。 React-admin依赖于源来读取和修改json数据。因此，当一个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"/>
    <>
)