javascript - 尝试在 react 中添加多张图片,但它只显示一张图片

标签 javascript node.js reactjs redux

我正在尝试选择多张图片,在状态下图片正在选择并存储,但只显示一张图片。下面是相同的代码

//选择图片并显示图片

 <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/

相关文章:

javascript - Handlebars js不遍历对象

javascript - Reactjs 使用字符串的不同部分构建 url

node.js - 从sql server获取两个日期之间的数据

javascript - 使用javascript,如何编写一个函数,根据矩形的宽度按比例增加/减少矩形的大小

javascript - ES6 : Conditional use of spread operator

javascript - 在 Express js 路由中创建过滤器

node.js - 为什么 puppeteer page.goto() 会抛出超时错误?

javascript - React componentDidMount 未触发且未更新 Electron 应用程序中的状态

javascript 计数

javascript - 日期范围选择器输入字段不是 24 小时格式