5

我正在使用 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 函数中添加返回，但我不确定它们返回到什么。

4

7 回答 7

2

我假设你知道，它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);
于 2013-06-29T19:14:06.660 回答
2 
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);

 reader.onloadend=function(e) {
   console.log(contents)
 }
}  

document.getElementById('file').addEventListener('change', readFileData, false);
于 2015-08-28T10:47:47.893 回答
0

我面临着类似的挑战，这就是我用来解决问题的方法。

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价值，因为我们在文件完全上传后调用它。

于 2014-09-01T09:57:10.143 回答
0

这是一个范围界定问题。当您在 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
于 2013-06-29T19:14:23.143 回答
0

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

有很多方法可以解决这个问题，但其中许多方法不适合推荐；）

我会做这两种方式之一：

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

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

于 2013-06-29T19:15:47.383 回答
0

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

var contents;
var outer_fn = function() {
  var inner_fn = function() {
    contents = '42';
  }
  inner_fn();
}
outer_fn();
// here, `contents' is '42'
于 2013-06-29T19:16:26.893 回答
0

我在 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 函数在服务文件中。没有我的评论，组件文件中的代码与此完全相同。

于 2019-08-22T10:35:31.773 回答