在react dropzone上传程序的网格中设置图像
在react dropzone上传程序的网格中设置图像
提问于 2021-11-11 11:11:11
我在设置自定义预览时感到困惑，就像image set in grid一样
我想在react-dropzone-uploader自定义预览中做到这一点，在那里我可以上传多个文件。
当前场景：my normal uploaded images
代码片段：
const Preview = ({ meta }: IPreviewProps) => {
const { name, percent, status, previewUrl } = meta ;
return (
<Grid item xs={6}>
<div className="preview-box">
<img src={previewUrl} /> <span className="name">{name}</span> - <span className="status">{status}</span>{status !== "done" && <span className="percent"> ({Math.round(percent)}%)</span>}
</div>
</Grid>
)
}
<Dropzone
getUploadParams={getUploadParams}
onSubmit={handleSubmit}
PreviewComponent={Preview}
inputContent="Drop Files"
/>我正在使用MUI V4我们没有任何图像索引，如何使用material UI在2-2个图像的网格视图中设置图像？
回答 1
Stack Overflow用户
发布于 2021-11-11 14:14:18
您需要将Grid项包装在Grid容器中。请看一下指南。https://mui.com/components/grid/
// Parent PreviewContainer.js
...
<Grid container spacing={2}>
{
images.map((image, i) => (
<PreviewItem key={i} meta={meta} />
))
}
</Grid>
...
// Child PreviewItem.js
...
<Grid item xs={4}>
// You can update the item size as you expect, but it seems like it should be 4 regarding the image attached
// Your preview component
</Grid>
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69927303
复制相关文章
相似问题
腾讯云开发者
