javascript - 数组中的 base64 图像文件在 javascript 中未定义

Question

我试图通过 <input type="file"/> 将 base64 图像字符串加载到数组中我确定字符串在数组中，但是当我调用数组元素时，控制台回调未定义。

按照我的代码:

fileChange(event){
    if (event.target.files && event.target.files[0]) {
            let imageFiles = [];
            for (var i = 0; i < event.target.files.length; i++) {

              let reader = new FileReader();
              reader.readAsDataURL(event.target.files[i]);
              reader.onload = (e) => {
                  imageFiles[i] = e.target.result;
                  console.log(e.target.result);
              };
            }
            console.log(imageFiles);
            console.log(imageFiles[0]);
        }
  }

//console result:
//"base64 string"
//[]-> 0: "base64 string"
//undefined

我认为是因为base64字符串太长了，但是我没有解决问题的思路。

有什么方法可以解决吗？

Answer 1

这两个语句

console.log(imageFiles);
console.log(imageFiles[0]);

在 reader.onload 尚未完成时立即调用。因此，imageFiles 数组为空。

您需要等到图像加载完毕才能记录它。一种方法是使用 Promises .这是加载多个文件的示例。 Promise.all 将等待所有文件加载完毕，然后记录它们。

document.getElementById("file").addEventListener("change", fileChange);
function fileChange(event) {
    if (event.target.files && event.target.files[0]) {
        console.clear();
        console.log("Loading selected files...");
        let promises = [];
        for (var i = 0; i < event.target.files.length; i++) {
            promises[i] = new Promise(resolve => {
                let reader = new FileReader();
                reader.readAsDataURL(event.target.files[i]);
                reader.onload = (e) => {
                    resolve(e.target.result);
                };
            });
        }      
        Promise.all(promises).then(console.log);
    }
}

<input type="file" id="file" multiple="multiple"/>