为什么FileReader一次读取多个文件顺序是错误的？

Question

按1234的顺序同时选择4个文件 打印出来e.target.files[i].name的顺序也是1234
但是在FileReader的onload里面打印出来的顺序是不对的 变成了2341
我再选择4个文件打印顺序还是不对的 最后渲染的顺序和onload的顺序一样是乱的 这是为什么？

var iLen = e.target.files.length
for (let i = 0; i < iLen; i++) {
var reader = new FileReader()
        reader.index = i
        reader.readAsDataURL(e.target.files[i]) 
        reader.fileName = e.target.files[i].name
        console.log(e.target.files[i].name) //打印顺序1,2,3,4
        reader.onload = function (event) {
          var imgMsg = {
            name: this.fileName,
            base64: this.result
          }
          that.dataImgs.push(imgMsg)
          console.log(this.fileName)   //打印顺序是乱的
          var txt = event.target.result
          that.imgShow.push(txt)
        }
}

Answer 1

FileReader.readAsDataURL是一个异步的方法，这个很容易理解，因为文件有大有小，读大文件耗时肯定比小文件长，因此没必要阻塞后续操作。你这里的循环每次都会创建一个 FileReader 并读取文件，因为读的文件有大有小，耗时肯定是不一样的，因此回调函数的执行时机肯定是不同的。

如果期望是相同的话，可以尝试使用 Promise 封装读取逻辑，之后通过 Promise.all 来确保读取顺序前后一致。