无法在react-admin的编辑模式下使用ImageField上传图像

Question

使用 React Admin，我正在为我的一个客户创建一个仪表板，我有一个要求，我必须添加客户的产品，在许多字段中，还有一个图像字段，我必须上传一张服务的图像在API中，产品是通过react-admin的CREATE创建的。

// create product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const CreateProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Create resource="products" basePath="/products">
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image
                    <span >
                      *File size should not exceed 5MB
                    </span>
                  </p>
                }
              >
                <ImageField source="src" title="images" />
              </ImageInput>
            </Grid>
          </Grid>
        </SimpleForm>
      </Create>
    </ThemeProvider>
  );
};

export default CreateProduct;

创建产品后，我也需要编辑该产品，同样，我也需要更新图像。

//Edit Product

import React, { useState} from "react";
import {
  SimpleForm,
  Create,
  ImageField,
  ImageInput,
} from "react-admin";
import Grid from "@material-ui/core/Grid";
import { ThemeProvider } from "@material-ui/styles";
import customTheme from "../../customTheme";

const PreviewImage = ({ record }) => (
  <img width={30} src={record} alt="Image Preview" />
);

const EditProduct = props => {
  const classes = useStyles();
return (
    <ThemeProvider theme={customTheme}>
      <Edit {...props}>
        <SimpleForm>
          <Grid
            container
            spacing={2}
            justify="space-between"
          >
         <Grid item xs={10}>
              <ImageInput
                source="data.pictures"
                label="Images"
                accept="image/png, image/jpg, image/jpeg"
                maxSize={5000000}
                placeholder={
                  <p>
                    Upload Image
                    <span >
                      *File size should not exceed 5MB
                    </span>
                  </p>
                }
              >
                //<ImageField source="src" title="images" />
                 <PreviewImage /> 
              </ImageInput>
            </Grid>
          </Grid>
        </SimpleForm>
      </Edit>
    </ThemeProvider>
  );
};

export default EditProduct;

EditProduct 的问题是我无法从记录中获取图像，该记录是在 ImageInput 内部使用的 ImageField 的帮助下的 URL，为了实现这一点，我创建了一个单独的组件

PreviewImage

，它从记录并将其呈现在

img

标签中，但我也想将新图像上传到编辑产品表单。 我无法使用react-admin中的当前文档来实现这一点。 如果有人知道我如何通过react-admin实现此编辑功能，请发布您的解决方案。

Answer 1

它对我有用

const PreviewImage = ({ record, source }) => {
    if (typeof (record) == "string") {
        record = {
            [source]: record
        }
    }
    return <ImageField record={record} source={source} />
}

....

<ImageInput source="preview">
    <PreviewImage source="src" />
</ImageInput>

Answer 2

const PreviewImage = ({ source }) => {
  let record = useRecordContext();
  if (record.undefined) {
    record = {
      [source]: record.undefined,
    };
  }
  return <ImageField source={source} record={record} title=" Image" />;
};

截至目前，react-admin 版本为 4.9.x， 与记录密钥相关的问题仍然存在，并继续之前的答案，上述代码对我有用