Question

我尝试使用Filereader Html5 API，但作为反应，它需要一个npm模块，而Filereader的相应npm模块不能正常工作并在文件上传后显示错误。如果不执行require（＆＃39; Filereader＆＃39;），webpack会显示错误。

使用npm模块Filereader显示：＆＃34;未捕获错误：无法读取为文件：{＆＃34;预览＆＃34;：＆＃34; blob：http％3A // dev.myntra.com％3A3000 / cfb8a917-b3df-46b2-b055-21da34f253f2＆＃34;}＆＃34; 我可以使用其他一些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>
    );
}
}

Answer 1

使用window.FileReader解决了这个问题，通过这个我可以在不使用任何npm包的情况下访问html5的Filereader API。

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

1 个答案: