reactjs - 无法在编辑模式下为 react-admin 上传带有 ImageField 的图像
问题描述
使用 React Admin 我正在为我的一个客户创建一个仪表板,我有一个要求,我必须添加客户的产品,在许多字段中,也有一个 Image 字段,我必须上传一张图片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 实现此 EDIT 功能,请发布您的解决方案。
解决方案
这个对我有用
const PreviewImage = ({ record, source }) => {
if (typeof (record) == "string") {
record = {
[source]: record
}
}
return <ImageField record={record} source={source} />
}
....
<ImageInput source="preview">
<PreviewImage source="src" />
</ImageInput>
推荐阅读
- php - 未找到列:“where 子句”中的 1054 列“电子邮件”未知
- matplotlib - 使用 imread 导入图片
- r - 在 ggplot2 中使用 view_follow() 时尝试应用非函数
- amazon-web-services - aws textract - 按段落分组输出行
- c# - 导入 UnityEngine.InputSystem 的问题。找不到错误 CS0246 类型或命名空间
- c# - 将 xUnit 添加到现有的 Web API 项目
- python - 熊猫,真值和模棱两可的真值有什么区别?ValueError: Series 的真值不明确
- opencv - 使用单应性估计摄像机角度
- python - discord.py 循环导入(AttributeError:部分初始化模块'discord')
- compiler-construction - 部分编译器计算算术运算