用 Javascript 读取 Synchronos 文件

Question

我有以下文件选择器对话框。我想允许选择多个文件。选择文件后，我想呈现所选文件的预览。我的代码是：

<input
          type="file"
          multiple
          accept=".png, .jpeg"

          onChange={e => {
            this.setState({ previews: [] });

            if (!e.target.files) {
              return;
            }

            var previews = [];

            for (var i = 0; i < e.target.files.length; i++) {
              var file = e.target.files[i];
              (function(file, previews) {
                var reader = new FileReader();

                reader.onload = function(e) {
                  // console.log(e.target.result);
                  console.log("Just pushed a new preview");
                  previews.push(e.target.result);
                };
                reader.readAsDataURL(file);
              })(file, previews);
            }

            console.log("All files read");
            // I want this to be called only after
            // all the file contents are read
            this.setState({ previews });
          }}
        />

但是，使用上面的代码，我的Just pushed a new preview 是在控制台上打印All files read 之后打印的。

有没有办法让我完成 FileReader 循环（关闭）然后调用 this.setState({previews})？

如果重要的话，所有这些代码都在一个反应​​文件中。

Answer 1

使用 Promise.all 等待所有的承诺都完成，以了解所有文件是否都已处理。而且，您需要在读取完文件后立即更新状态。最好添加一个进度条和 setState 来更新它。

var Sample = React.createClass({
  getInitialState: function () { return { previews: [], allfilesdone:false }; }, 
  render: function() {
    var p = this.state.previews.map((p) => <div>{p}</div>);
    return (
      <div style = {this.styler}>
        <input id="upload" multiple
          accept=".txt" type="file"
           onClick={(e) => this.setState({allfilesdone: false})}
           onChange={(event)=> { 
                var s = this;
                this.setState({previews:[], allfilesdone: false});
                var fs = event.target.files;
                Promise.all([...fs].map((file) => {
                  var reader = new FileReader();
                  return new Promise((resolve,reject) => {
                    reader.onload = (ev) => {
                        resolve(ev.target.result);
                        var pt = this.state.previews;
                        pt.push(ev.target.result);
                        s.setState({previews: pt});
                    }
                    reader.readAsText(file);
                  });
                }))
                  .then(ft => {
                        this.setState({allfilesdone: true});
                      });
            }}/>
        <div>all processed: {this.state.allfilesdone?"true":"false"}</div>
        <div>number of files: {this.state.previews.length}</div>
        <div>{p}</div>
      </div>
    );
  }
});

React.render(
  <Sample />, 
  document.getElementById('mount-point'));

Answer 2

您需要在 onLoad 事件中移动 setState。由于文件读取器是异步的，因此在 onLoad 之外设置状态将在事件完成之前触发它，并会导致 previews 数组为空或不完整。

 var previews = [];
 var s = this;

 for (var i = 0; i < e.target.files.length; i++) {
   var file = e.target.files[i];
      var reader = new FileReader();

      reader.onload = function(e) {
        previews.push(e.target.result);
        s.setState({ previews });
      };

      reader.readAsDataURL(file);
 }