如何使用React创建可存储多份文档/图片的单个字段

要实现单个字段存储多份文档或图片，核心是使用支持多文件选择的上传组件，并结合表单状态管理完成数据的提交与回显。以下是具体实现方案：

核心实现要点 #

• 启用上传组件的multiple属性，允许用户一次性选择多个文件
• 通过accept属性限制可上传的文件类型（示例中限定为图片）
• 结合表单状态管理工具处理文件的存储与编辑回显

完整示例代码 #

export const DemoimgUpdate = () => {
  const dispatch = useAppDispatch()
  const demoimgEntity = useAppSelector(state => state.demoimg.entity);
  const loading = useAppSelector(state => state.demoimg.loading);
  const updating = useAppSelector(state => state.demoimg.updating);
  const updateSuccess = useAppSelector(state => state.demoimg.updateSuccess);

  const handleClose = () => {
    navigate('/demoimg' + location.search);
  };

  const defaultValues = () => isNew
    ? {}
    : { ...demoimgEntity };

  return (
    <ValidatedForm defaultValues={defaultValues()} onSubmit={saveEntity}>
      {!isNew
        ? <ValidatedField
            name="id"
            required
            readOnly
            id="demoimg-id"
            label="ID"
            validate={{ required: true }}
          />
        : null
      }
      <ValidatedBlobField
        label="Images"
        id="demoimg-images" 
        name="images"
        data-cy="images"
        isImage
        accept="image/*"
        multiple
      />
    </ValidatedForm>
  );
};

代码细节说明 #

• ValidatedBlobField：自定义文件上传组件，multiple属性开启多文件选择，accept="image/*"限定仅上传图片，isImage标记字段存储的是图片资源
• 表单状态处理：defaultValues函数根据页面类型（新建/编辑），决定是否回显已存储的图片数据
• Redux状态集成：通过useAppSelector获取数据实体、加载状态等，useAppDispatch触发数据保存的action

内容的提问来源于stack exchange，提问作者Prisha Yadav