Question

这是我的Html5代码：

<div>
    <input type="file" multiple (change)="comPress($event.target.files)">
</div>

我需要更改所有文件的功能comPress（）。这在Angular component.ts中：

comPress(images){
   function fetchResult(img) {
    return new Promise(  function(resolve, reject) {

      let data = [];
      for(let i of img){
      var reader = new FileReader();
        reader.onload = function (e) {
          data = [...data, e.target['result']];
        }
        reader.readAsDataURL(i);
      }

       resolve(data);
       reject('reject');
    })

  };

  fetchResult(images).then(data=>{
    console.log(data) // is always []
  }).catch(err=>console.log(err))

}

我需要将此变量let data = [];与来自函数onload()的所有结果数据一起推送

但是结果总是[]个空数组！

我希望得到这个结果：

["data:sadvdsbdsbdsvdsvdsbdb", "data:vaswbvewbewbregergreg"]

此代码有什么问题？

Answer 1

循环结束后，您的onload处理程序仍未运行。因此，不会填充数据。您首先要做的是：

function readFile(i) {
  return new Promise(success => {  
    const reader = new FileReader();
    reader.onload = e => {
      success(e.target['result']);
    };
    reader.readAsDataURL(i);
  });
}

您将获得与FileReader的实际数据相符的承诺。然后在您的主要代码中：

return Promise.all(img.map(i => readFile(i)));

Answer 2

您的代码的问题是，在调用on load事件之前已解决了promise，因此导致空数组，您需要做的就是在onloadend事件中解决您的诺言，即

reader.onloadend = function() {
  resolve(data)
}

为什么代码执行“ new Promise”总是导致空数组

2 个答案: