如何解决一次上传一张带有预览问题的图片-React Drop区域
const [files,setFiles] = useState([]);
const onDrop = useCallback((acceptedFiles) => {
// Do something with the files
setFiles(
acceptedFiles.map((file: File) =>
Object.assign(file,{
preview: URL.createObjectURL(file),})
)
);
},[]);
const { getRootProps,getInputProps } = useDropzone({
onDrop,accept: 'image/*',multiple: false,});
const thumbs = files.map((file: { [key: string]: string }) => (
<div className={classes.imagePreview} key={file.name}>
<img className={classes.image} src={file.preview} alt={file.name} />
</div>
));
useEffect(() => {
// Make sure to revoke the data uris to avoid memory leaks
files.forEach((file: { [key: string]: string }) =>
URL.revokeObjectURL(file.preview)
);
},[files]);
我的HTML
<div className={classes.imageContainer}>
{thumbs}
<div className={classes.borderBox} {...getRootProps()}>
<input {...getInputProps()} />
<div>
<AddIcon />
</div>
</div>
</div>
我尝试一次通过dropzone上传,但是我的图片被替换为第二张。
解决方法
修复了该错误,并附加了状态
const onDrop = useCallback(
(acceptedFiles) => {
// Process files
const oneFile = get(acceptedFiles,'[0]',[]);
Object.assign(oneFile,{ preview: URL.createObjectURL(oneFile) });
setFiles([oneFile,...files]);
},[files]
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。