Javascript 如何使用 FileReader.onload 从多个 json 文件中加载内容？

Question

我需要上传多个 json 文件并将它们的内容存储在一个数组中。我的目标是以某种方式将它们合并在一起。我试过这样做：

var results = new Array();    //global variable

document.getElementById('uploadId').onclick = function () {
   var files = document.getElementById('selectFiles').files;

   for (var i = 0; i < files.length; i++) {
       var fr = new FileReader();

       fr.onload = function (e) {
           console.log(e);
           var result = JSON.parse(e.target.result);
           results.push(result);
       }

       fr.readAsText(files.item(i));
   }
   process();
}; 

function process(){
   console.log(results); // displays everything as expected
   console.log(results.length); // returns 0 ?!
   console.log(results[0]) // return undefined ?!
}

然后在将results 数组记录到控制台时，一切都按预期显示。但是当我尝试遍历数组时，所有单个对象都是undefined。 results.length 也返回 0。

我猜可能存在与异步性有关的问题。知道如何解决这个问题吗？

Answer 1

您可以将预定义的对象绑定到存储两个值的加载函数（或定义范围和/或全局变量）：filesToProcess 和 filesProcessed。在每次加载时，您都会递增 filesProcessed，直到它到达 filesToProcess。也就是说，如果您想保留 IE 等旧浏览器或旧 Safari 版本的支持。

遗憾的是，我只能在理论上展示它，没有任何实际测试。

document.getElementById('uploadId').onclick = function () {
   var files = document.getElementById('selectFiles').files,
       param = {filesProcessed: 0, filesToProcess: files.length};

   for (var i = 0; i < files.length; i++) {
       var fr = new FileReader();

       fr.onload = function(e){
           results.push(JSON.parse(e.target.result));

           //REM: this being param
           this.filesProcessed++;

           if(this.filesProcessed === this.filesToProcess){
               process()
           }
       }.bind(param)

       fr.readAsText(files.item(i));
   }
};

Answer 2

通常，您可以通过将您正在等待文件的代码（在本例中为process）作为FileReader 的侦听器的一部分来避免此问题，以便在完成后发生。当您需要让用户将多个文件上传到同一个 input 并且无法单独处理它们时，我想不出这样的场景（即，如果您需要两个文件同时进行，请采取它们在单独的inputs 中并使用提交按钮）。

但是，如果您这样做，我的建议是使用 async/await 或 ES6 Promises。这是我将所有文件作为 JSON 读取到数组中的方法，然后然后对它们做一些事情。

const results = [];
const input = document.querySelector('input[type="file"]');

input.addEventListener('change', async() => {
  await Promise.all([...input.files].map(file => new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onloadend = () => {
      try {
        resolve(results.push(JSON.parse(reader.result)));
      } catch (err) {
        // Return a blank value; ignore non-JSON (or do whatever else)
        console.log('Please use .json!');
        resolve();
      }
    }
    reader.readAsText(file);
  })));

  // Do Stuff
  console.log(results);
  console.log(results.length);
  console.log(results[0]);
});

<form action="#">
  <input type="file" multiple />
</form>

---

这与我的answer here 非常相似。

要测试的一些 JSON 文件：

[
  {
    "name": "bobby",
    "age": 12
  },
  {
    "name": "don",
    "age": 64
  },
  {
    "name": "dale",
    "age": 16
  },
  {
    "name": "toby",
    "age": 52
  },
  {
    "name": "alfred",
    "age": 234
  },{
    "name": "steve",
    "age": 12
  }
]

[
  {
    "name": "denmark"
  },
  {
    "name": "sweden"
  },
  {
    "name": "norway"
  },
  {
    "name": "finland"
  }
]