Question

为什么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;

Answer 1

我相信您必须将bar.o循环逻辑移出for方法

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

请参阅下面的评论更新代码，我还没有尝试过这个抱歉：

reader.onloadend

Answer 2

您的代码存在一些错误：

reader.readAsDataURL(file)位于onloadend回调内 - 它应该在外面，因此读者可以读取文件，然后再调用onloadend。
temp为null，您尝试使用push方法。将其设置为空数组。
你在React中真的不需要document.getElementById - 使用refs

以文件阅读器存储处于反应状态的上传图像

2 个答案: