无法在 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 实现此编辑功能，请 post 您的解决方案。

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>

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

Not able to upload Image with ImageField in EDIT mode for react-admin

reactjs

material-ui

react-admin

admin-on-rest