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依赖于源来读取和修改表单数据。因此，当一个ImageInput更改时，其他所有输入都随之更改。

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

像这样：

a = 1, 2, 3, 4
#=> [1, 2, 3, 4]