将参数传递给 FileReader 的 onloadend 函数 [重复]

Question

我正在使用readAsDataURL 将 blob 转换为 base64。问题是我在循环中这样做：

var reader = new FileReader();

for(var index in objects){
   reader.readAsDataURL(objects[index].blob);
}

reader.onloadend = function() {
   // need to pass my index here
   objects[index].base64 = reader.result;
}

所以我的第一个问题是我可以为我的所有 blob 使用同一个阅读器吗？如果是，我怎样才能将 index 传递到我的 onloadend 函数中？

如果我不能使用同一个阅读器，我应该如何解决这个问题？

Answer 1

现在，我承认我的答案写得很快，因为我的笔记本电脑快死了，但我相信下面的代码应该可以解决你的问题。

function readAllBlobs(objects, callback) {
    var index = 0;
    var reader = new FileReader();

    function readBlob(object) {
        reader.readAsDataURL(object.blob);
    }

    var readBlobHandler = function () {
        // the index is available here.
        objects[index].base64 = reader.result;

        index++;
        if (index == objects.length) {
            // all objects have been read, fire callback on mutated objects array.
            callback(objects);
            return;
        }

        readBlob(objects[index]);
    }

    reader.onload = readBlobHandler;

    readBlob(objects[index]);
}

我在想你可以编写一个函数来接受你的 blob 对象数组和一个回调。该函数使用带有 onload 处理程序的单个 FileReader，该处理程序不断增加索引并读取传入数组中的下一个对象。索引始终可用，因为此逻辑在闭包中执行，而不是在 for 循环中执行。一旦索引增加到与传入的对象数组相同的长度，您的回调将使用作为参数传递的变异对象数组执行。一旦所有 blob 都转换为 base64，此回调应包含您要执行的逻辑。

希望这会有所帮助！