Question

我正在努力将多张图片同时保存到我的州。这是我目前的代码：

handleImageChange(e) {
        e.preventDefault();

        var pictures = [];

        let reader = new FileReader();
        let files = e.target.files;

        var index;

        for(index = 0;index<files.length;index++){
            var file = files[index];
            var url = reader.readAsDataURL(file);

            pictures.push({'image':file, 'imagePreviewUrl':url});

            console.log(pictures);


        }

      }

基本上我试图遍历每个图像文件，然后使用一个对象，将图像分配给＆＃39; - ＆＃39; -value，并将URL分配给＆＃39; imagePreviewUrl＆＃39;。但是在每个console.log上，它只是在imagePreviewUrl上显示为undefined。我在这做错了什么？我想让这个工作，然后将我的图片数组保存在我的状态（追加 - 如果存在）。我正在尽力使用预览制作图像选择器。

非常感谢帮助。

Answer 1

这是因为你需要使用＆＃34; onloadend＆＃34;读者对象中包含的功能。

这将是这样的：

    for(index = 0;index<files.length;index++){
        var file = files[index];
        this.handleLoadImage(file);
    }
...
...

 // class method

  handleLoadImage = (file) => {
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        // as a good practice, use a function to set state
        this.setState(() => ({
          imagePreviewUrl: reader.result,
        }));
      };
      reader.readAsDataURL(file);
    }
  }

React将多个图像保存到状态

1 个答案: