Javascript 使用文件读取器以react状态存储上载的图像

为什么reader.onloadend不执行？我试图做的是存储上传图像的src，并在渲染方法中映射图像数组时渲染预览。要真正执行文件读取器方法，需要做哪些更改

import React, { Component } from 'react';
import { Button, Input } from 'semantic-ui-react';
class Uploadimage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      images:[],
    };
  }

setImages = (e) => {
  e.preventDefault();
  let { images } = this.state;
  const imageFiles = document.getElementById("image");
  const filesLength = imageFiles.files.length;
  const temp = null;
  let reader = new FileReader();

  reader.onloadend = () => {
  for(var i = 0; i < filesLength; i++) {
      let file = e.target.files[i];
      temp.push(reader.readAsDataURL(file));
    }
    this.setState({
      images:temp
    })
  }
}

  render() {
    let { images } = this.state;
    return (
      <div>
        <form onSubmit={this._handleSubmit}>
          <Input id="image" type="file" multiple defaultValue='no file chosen' onChange={this.setImages} />
          <Button icon='upload' type="submit" onClick={this._handleSubmit}>Upload Image</Button>
        </form>
        {images.map((item,index) => <img src={item} />)}
      </div>
    )
  }

}

export default Uploadimage;

import React，{Component}来自'React'；
从“语义ui反应”导入{按钮，输入}；
类Uploadimage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：“”，
图像：[]，
};
}
设置图像=（e）=>{
e、 预防默认值（）；
设{images}=this.state；
const imageFiles=document.getElementById（“图像”）；
const filesLength=imageFiles.files.length；
常数temp=null；
let reader=new FileReader（）；
reader.onloadend=（）=>{
对于（var i=0；i）}
)
}
}
导出默认上传图像；

您的代码有两个错误：

reader.readAsDataURL（file）

在

onloadend

回调内部-它应该在外部，因此读取器可以读取文件，然后在调用之后调用

onloadend

temp

为

null

，您尝试使用

push

方法。将其设置为空数组

React-use中实际上不需要

document.getElementById

---

我相信您必须将

for

循环逻辑移出

读卡器.onloadend

方法

到目前为止，我的印象是，当使用react时，任何表单字段都可以转换为受控组件，但是fileUpload似乎是一个例外

请参阅下面带有注释的更新代码，我没有尝试过此操作。抱歉：

class Uploadimage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            file: '',
            images:[],
        };

        this.fileReader = new FileReader();
    }

    setImages = (e) => {
        e.preventDefault();
        let self = this; // unsure if this is needed
        self.setState({ images: [] }); // empty out current images array
        const imageFiles = e.target.files; // document.getElementById("image"); // You may want to avoid querying the dom yourself, try and rely on react as much as possible
        const filesLength = imageFiles.length; // imageFiles.files.length;
        // const temp = null;

        for(var i = 0; i < filesLength; i++) {
            let reader = new FileReader();
            let file = imageFiles[i];

            reader.onloadend = () => {
                self.setState({ images: self.state.images.concat(reader.result); });
            }

            reader.readAsDataURL(file);
        }
    }

    render() {
        let { images } = this.state;
        return (
            <div>
                <form onSubmit={this._handleSubmit}>
                    <Input id="image" type="file" multiple defaultValue='no file chosen' onChange={this.setImages} />
                    <Button icon='upload' type="submit" onClick={this._handleSubmit}>Upload Image</Button>
                </form>
                {images.map((item,index) => <img src={item} />)}
            </div>
        )
    }
}

类Uploadimage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
文件：“”，
图像：[]，
};
this.fileReader=newfilereader（）；
}
设置图像=（e）=>{
e、 预防默认值（）；
让self=this；//不确定是否需要这样做
self.setState（{images:[]}）；//清空当前图像数组
const imageFiles=e.target.files；//document.getElementById（“image”）；//您可能希望避免自己查询dom，请尽可能地尝试并依赖react
const filesLength=imageFiles.length；//imageFiles.files.length；
//常数temp=null；
对于（var i=0；i{
self.setState（{images:self.state.images.concat（reader.result）；}）；
}
reader.readAsDataURL（文件）；
}
}
render（）{
设{images}=this.state；
返回(
上传图像
{images.map（（项，索引）=>）}
)
}
}

现在发生了什么？有控制台错误吗？

reader.onloadend

是reader.readAsDataURL的回调函数。您的

for

循环不应该在它之外吗？@TomaszBubała没有错误，也没有发生任何事情。您将

temp

设置为null，然后尝试使用

推送

method@TomaszBubała我改变了这一点，但问题是我们甚至从未进入reader.onloadend函数。你能解释一下

reader.readAsDataURL（文件）

为什么在末尾需要此选项，以及它如何影响处于状态的图像中的文件。

reader.onloadend

指向一个箭头函数，该函数将文件读取的结果放入图像数组中。请注意，arrow函数不会立即被调用，而是“注册”以在

reader

完成

reader.readAsDataURL（文件）后运行