如何在 React 中从本地上传文件？答案

【问题标题】：How to upload a file from local in React?如何在 React 中从本地上传文件？
【发布时间】：2016-01-21 04:55:31
【问题描述】：

我尝试使用 Filereader Html5 API，但它需要一个 npm 模块，并且 Filereader 的相应 npm 模块无法正常工作并在文件上传后显示错误。不做 require('Filereader')，webpack 会报错。

使用 npm 模块 Filereader 显示：“未捕获的错误：无法读取为文件：{“preview”：“blob:http%3A//dev.myntra.com%3A3000/cfb8a917-b3df-46b2-b055-21da34f253f2”} " 我可以为这种文件使用其他一些 npm 模块，还是有什么方法可以直接从反应中使用 Filereader API？这是我的代码：

{
onDrop(files) {
  this.setState({
    files: files

  });
  console.log(files[0]);
  var reader = new FileReader();

  var contents;

   reader.onload = function(event) {

     contents = this.result;

     console.log(contents);

      $.ajax({
      type: 'POST',
      url: '/api/csv',
      async: true,
      data: json,
      crossDomain: true,
      contentType: "application/json; charset=utf-8",
      processData: false,
      timeout:5000,
      success: function(response){
        console.log("success");
      },
      error: function(jqXHR, textStatus){
        console.log("error");
        }            

      });

   }
        reader.readAsText(files[0],'utf8');



}




render() {
  return (
    <div>
    <Dropzone onDrop={this.onDrop}>
    <div>Try dropping some files here, or click to select files to upload.</div>
    </Dropzone>
    </div>
    );
}
}

【问题讨论】：

标签： reactjs filereader

【解决方案1】：

使用window.FileReader解决了这个问题，通过这个我可以访问html5的Filereader API，而无需使用任何npm包。

【讨论】：