Javascript 我想加载文件夹中的图像，并想在我的js中获取base64中的所有图像，以备将来使用

我面临的问题是，由于文件读取器库函数onloadend，我总是获取图像数组中的最后一个图像。 如何为文件夹中的所有图像获取base64

<input id="file-input" multiple webkitdirectory type="file" />
var input = document.getElementById('file-input');
var file_names = "";
var entries_length = 0;
var entries_count = 0;
var image = new Array();   
var obj = {};
var j = 0;
input.onchange = function(e) {
        var files = e.target.files; // FileList
        entries_length = files.length;
        console.log(files);

        for (var i = 0, f; f = files[i]; ++i){
            console.log("i:"+i);
            entries_count = entries_count + 1;
            //console.debug(files[i].webkitRelativePath);
            if(files[i].type=="image/jpeg")
            {

                var string = files[i].webkitRelativePath;
                var name = string.split("/")[3]; //this is because my image in 3rd dir in the folder
                var reader = new FileReader();
                reader.onloadend = function() {

                        obj.name = string.split("/")[3];
                        obj.image = reader.result;
                        image[j] = obj;
                        j = j+1;

                }
                reader.readAsDataURL(files[i]);

            }

        }
       console.log(image);
    }        

var input=document.getElementById（'file-input'）；
var file_name=“”；
var条目长度=0；
var分录\ u计数=0；
var image=新数组（）；
var obj={}；
var j=0；
input.onchange=函数（e）{
var files=e.target.files；//文件列表
条目长度=files.length；
console.log（文件）；
对于（变量i=0，f；f=files[i]；++i）{
控制台日志（“i:+i”）；
条目计数=条目计数+1；
//调试（文件[i].webkitRelativePath）；
如果（文件[i]。类型==“图像/jpeg”）
{
var string=files[i].webkitRelativePath；
var name=string.split（“/”[3]；//这是因为我的图像位于文件夹的第三个目录中
var reader=new FileReader（）；
reader.onloadend=函数（）{
obj.name=string.split（“/”[3]；
obj.image=reader.result；
图像[j]=obj；
j=j+1；
}
reader.readAsDataURL（文件[i]）；
}
}
console.log（图像）；
}        

该问题是由文件的异步加载引起的。每次迭代数组并为读取器设置

onloadend

处理程序，然后通过调用

readAsDataURL

开始加载

一个问题是，在加载第一个图像时，可能

for

循环已经完成，并且

i

已经位于数组的最后一个索引处

此时，从

文件[i].webkitRelativePath中获取路径将给出最后一个文件名，而不是您期望的文件名

检查以查看一种可能的解决方案-每个加载都在一个单独的函数中执行，该函数保留其作用域以及
file.name
。不要因为他们正在使用的构造而延迟：
[].forEach.call（files，readAndPreview）
。这是一种映射文件的方法，这些文件是一个文件列表而不是一个常规数组（因此列表没有自己的forEach方法）

因此，将加载逻辑包装到以文件对象为参数的函数中就足够了：

var images = [];

function loadFile(f) {
    var reader = new FileReader();
    reader.onloadend = function () {
        images.push({
            name : f.name, // use whatever naming magic you prefer here
            image : reader.result
        });
    };
    reader.readAsDataURL(f);
}

for (var i=0; i<files.length; i++) {
    loadFile(files[i]);
}

var-images=[]；
函数加载文件（f）{
var reader=new FileReader（）；
reader.onloadend=函数（）{
图像推送({
name:f.name，//在这里使用您喜欢的命名魔法
图片：reader.result
});
};
reader.readAsDataURL（f）；
}
对于（var i=0；i“我总是获取图像数组中的最后一个图像，因为“…
obj
是引用对象的全局变量，是的。将其设置为局部变量，并在每次分配属性值之前为其分配一个新的空对象。”var input=document.getElementById（'file-input'）{”-这看起来不像是有效的JS，带有
{
最后…这不是一个问题，但我试过了，问题还在那里。你能试试吗？@cbroe出于好奇，你为什么需要dataURI版本？你最好使用更轻的同步URL。createObjectURL如果你只需要显示这些文件；如果你想把它上传到服务器上，那么你真的会最好将其作为八位元流发送（直接发送BLOB），而不是dataURI版本。事实上，您需要dataURI版本的情况非常有限。我已经尝试了一下，现在问题是如何解决的，但问题仍然存在，您能澄清一下什么问题吗？