Question

我正在使用FileReader和HTML文件对话框来读取脚本中的文件。如何从FileReader.onload函数中传递此文件的内容？

function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    var contents = e.target.result;
  }
  reader.readAsText(file);
}
document.getElementById('file').addEventListener
    ('change', readFileData, false);

/* I want to access the contents here */

我尝试在readFileData和onload函数中粘贴返回，但我不确定它们会返回什么。

Answer 1

我假设您知道，async和所有。

所以，简短的回答是：不，你不能这样做。

但是，如果您希望以后的呼叫可以全局访问内容，您可以这样： -

var contents;// declared `contents` outside
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
    contents = e.target.result; //<-- I removed the `var` keyword
  }
  reader.readAsText(file);
}

document.getElementById('file').addEventListener('change', readFileData, false);

var reasonableTimeToWaitForFileToLoad = 100000;

console.log(contents); //`contents` access first attempt: prints undefined



setTimeout(function() {
  console.log(contents);//`contents` access second attempt: prints the contents 'may be if the time allows.'
}, reasonableTimeToWaitForFileToLoad);

Answer 2

这是一个范围问题。当您在onload中声明内容时，在该函数运行后它将不再可用。您需要首先在该范围之外声明内容。

var contents;
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
   contents = e.target.result;
  }
  reader.readAsText(file);
}
document.getElementById('file').addEventListener
    ('change', readFileData, false);

//make changes here
//contents should have the correct value

Answer 3

首先，您必须意识到使用FileReader读取文件是一项异步任务，您无法以同步方式使用它。

有很多方法可以解决这个问题，但很多方法都不适合推荐;）

我会选择以下两种方式之一：

1：您可以在onload事件处理程序中调用函数，并将文件内容作为参数传递

2：您可以在onload事件处理程序中触发事件，并将文件内容作为事件数据传递

Answer 4

只需在两个函数之外声明contents并在内部函数内分配它：

var contents;
var outer_fn = function() {
  var inner_fn = function() {
    contents = '42';
  }
  inner_fn();
}
outer_fn();
// here, `contents' is '42'

Answer 5

我遇到了类似的挑战，这就是我用来解决问题的方法。

var contents;
function readFileData(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = function(e) {
   contents = e.target.result;
  }

 reader.readAsText(file);

 //calling to access the 'contents' variable
 accessFileContents();
}  

document.getElementById('file').addEventListener('change', readFileData, false);
var wait4file2load = 1000;

/* To access 'contents' here */
function accessFileContents(){
  setTimeout(function(){
    console.log(contents);
  }, wait4file2load);
}

由于我们在文件完全上传后调用它，因此不会给出undefined值。

Answer 6

我在Angular 7（打字稿）中遇到了类似的问题，这就是我解决问题的方式。

我想做的是访问fileReader-> reader.onload内发生的base64转换

然后将该参数传递给另一个方法，在该方法中，我可以将其转换为JSON对象，然后将其发布到API，以查看我也要在发布中发布另一个参数。（未在此代码中添加）

我首先要做的是声明在方法之外可能需要访问的内容。

base: any = null;
base64File: any = null;
fileToTest: any = null;

然后我在上传事件触发时将pdf转换为base64


convertToBase64 (e){

  this.fileToTest = e.target.files[0];
  var reader = new FileReader();
      reader.onload = () => { 
        this.base64File = reader.result.slice(28); 
};

reader.onerror = function (error) {
  console.log('Error: ', error);

}.bind(this.base64File);

reader.readAsDataURL(this.fileToTest);

return this.base64File;
}

用另一种方法最后访问base64文件


 onSubmit() {

  console.log("base 64 file is visible", this.base64File);

    var base = 
      {
        "FileBase64": this.base64File,
        "Path": "document",
        "FileType": ".pdf"
      };

  console.log("JSON object visible", base);
  this.uploadService.base64Post(base);
}

现在一切正常，并且希望这可以帮助其他人发现相同的问题。

使用Angular 7，代码在组件文件中，而post函数在Service文件中。不用我的注释，该代码与组件文件中的代码完全一样。

将文件内容传递给外部变量

7 个答案: