Question

我试图通过alt + shift + c将base64图像字符串加载到数组中我确信字符串在数组中，但是当我调用数组元素时，控制台回调是未定义的。

跟随我的代码：

<input type="file"/>

我认为是因为base64字符串太长了，但我不知道要解决这个问题。

有哪些方法可以解决它？

Answer 1

这两个陈述

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

当reader.onload尚未完成时，会立即调用

。因此，imageFiles数组为空。

您需要等到图像加载才能记录它。一种方法是使用Promises。以下是加载多个文件的示例。 Promise.all将等到所有文件都加载完毕后再记录下来。

＆＃13;

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);
    }
}

＆＃13;

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

＆＃13;

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

1 个答案: