【问题标题】：React-admin : Multiple image upload to s3 at onceReact-admin ：一次将多张图片上传到 s3
【发布时间】：2020-02-03 10:51:54
【问题描述】：

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

什么问题：

问题是每当我在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按钮。

【问题讨论】：

标签： amazon-s3 upload react-admin api-platform.com

【解决方案1】：

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

【讨论】：