Question

我一直在尝试将文件及其匹配的dataurl添加到数组中的对象中。

文件是FileList对象。

我首先在Filereader的onloadend事件中尝试了此操作但在阅读过程中无法访问原始文件，因此转移到了promises上。

var data = [];
for(var i = 0; i < files.length; i++){
   data.push({
        file: files[i],   //keep the files for uploading
        src: readFile(files[i]) // generate the src to offer preview image
    });
    var last = data.length -1;
    console.log(last); //log a
    data[last].src.then(function(result){
        console.log(last); // log b
        data[last].src = result // overwrite the src deffered object with the result of the promise
    });
}

readFile正在返回一个延迟的承诺，假设这是有效的。

当文件的长度为1时，这种方法可以正常工作，但是当文件是多个时，我会遇到异步方面的问题而且它只适用于最后一项。

基于2个文件的日志结果（files.length == 2）：

0 //log a
1 //log a
1 //log b <-- ignores 0 stays as 1
1 //log b

期待0101

Answer 1

这是一个常见问题：JavaScript closure inside loops – simple practical example。

您可以通过将索引绑定到回调来解决它：

data[last].then(function(index, result){
    data[index].src = result;
}.bind(null, last));

将promise结果添加到数组中的项目

1 个答案: