我正在尝试选择多张图片,在状态下图片正在选择并存储,但只显示一张图片。下面是相同的代码
//选择图片并显示图片
<div className="md-form mb-5">
<input type="file" id="form29" name='images' onChange={e => pickImage(e)} className="form-control validate" multiple hidden/>
<button className="btn btn-outline-dark btn-sm" onClick={e => selectImage(e)}>Pick Image</button>
</div>
<div className="row text-center">
{image.length > 0 ?
image.map(img => (
<div className="col-md-4" key={img.url}>
<img src={img.url} alt={img.name} className="img-fluid"/>
<span style={{cursor: 'pointer'}}>
<i class="far fa-trash-alt" onClick={e => deleteImage(img.name, e)}></i>
</span>
</div>
)) : <p>No Images Picked</p>}
</div>
//定义状态
const [addDiary, setAddDiary] = useState({date: null, content: null, images: []});
const [ image, setImage ] = useState([]);
//定义存储和删除图片的方法
const selectImage = (e) => {
document.getElementById('form29').click();
}
const deleteImage = (name, e) => {
const remainingImage = image.filter(img => {return img.name !== name});
setImage(remainingImage);
const remainingImageState = addDiary.images.filter(img =>
{
return img.name !== name});
setAddDiary({...addDiary, images: remainingImageState });
}
const pickImage = (e) => {
console.log(e, 'e obj')
for(const file of e.target.files) {
const reader = new FileReader();
reader.onload = (e) => {
setImage([...image, {url: URL.createObjectURL(file), name: file.name}]);
console.log(e.target.name)
setAddDiary({ ...addDiary, images: [...addDiary.images, file]});
};
reader.readAsDataURL(file);
}
}
最佳答案
这里的问题是你在每次加载时更新图像,所以你应该首先将所有图像加载到缓存中,最后更新状态,你可以通过放置这段代码来实现
const pickImage = (e) => {
console.log(e, 'e obj');
const limitImages = e.target.files.length;
let count = 0;
const images = [];
for(const file of e.target.files) {
const reader = new FileReader();
reader.onload = (e) => {
images.push({ url: URL.createObjectURL(file), name: file.name });
count++;
if (count === limitImages) {
// here all images are loaded, so update the state
setImage(images);
setAddDiary({ ...addDiary, images: addDiary.images.concat(images)});
}
};
reader.readAsDataURL(file);
}
}
Remember you should handle the error event too, too notify the user that was an error
因此,您可以避免 selectImage
方法在输入中触发 onClick 事件,只需将 id
添加到您的 input 文件
并使用触发事件的标签,如下所示:
<div className="md-form mb-5">
<input type="file" id="form29" name='images' onChange={e => pickImage(e)} className="form-control validate" multiple hidden id="file-picker" />
<button className="btn btn-outline-dark btn-sm" onClick={e => selectImage(e)}>
<label id={'file-picker'}>
Pick Image
</label>
</button>
</div>
希望对你有帮助
关于javascript - 尝试在 react 中添加多张图片,但它只显示一张图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58880982/