如何解决如何从evt.target.files中删除文件?
我创建了一个应用程序,可以在其中成功上传和显示图像,包括在将选定的图像预览上传到数据库之前对其进行查看。
问题在于,在预览所选图像期间,我无法取消选择,请删除任何所选图像。我只是想出了如何删除图像预览,而不是图像文件本身,因为它仍然被上传到数据库。
来自用于处理图片上传的react组件:
此函数将图像文件添加到selectedPhotos数组,并为其创建斑点,并将斑点添加到imagePreviews数组。
const [selectedPhotos,setSelectedPhotos] = React.useState([]);
const [imagePreviews,setImagePreviews] = React.useState([]);
const captureImageFileAndPreview = evt => {
for (let i = 0; i < evt.target.files.length; i++) {
selectedPhotos[i] = evt.target.files[i];
imagePreviews[i] = URL.createObjectURL(selectedPhotos[i]);
}
setSelectedPhotos(selectedPhotos.filter(photo => photo.name.match(/\.(jpg|jpeg|png|gif)$/)));
setImagePreviews(imagePreviews);
};
此功能仅会删除所选图像的预览
const dropImageFromPreview = t => {
let item = t.previousElementSibling.src;
setImagePreviews(imagePreviews.filter(prev => prev !== item));
};
在下面的代码中,我将dropImageFromPreview
传递给onClick处理程序,并删除了预览
{imagePreviews.length
? imagePreviews.map((prev,idx) => (
<div className='image-prev' key={idx}>
<img src={prev} alt=""/>
<i
className="fas fa-times-circle fa-lg"
onClick={(evt) => dropImageFromPreview(evt.target)}
> </i>
</div>
)) : <p>No image</p>}
如何做到这一点,以便在同一函数`dropImageFromPreview中,完全删除所选的图像数据,这样它就不会上传到数据库中?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。