使用 FileReader 将值保存到数组的问题

Question

我正在开发 Angular4 项目。我从 API 调用中返回 Blob，然后将其转换为 base64，但无法将其保存到图片数组中（因此我可以稍后使用 *ngFor 显示它）。

这是我的 API 调用：

getImg(): Observable<Blob> { const path = *can't show this part*; return this.http.get(path, { responseType: "blob" }); }

这是我迄今为止尝试过的：

这个函数在this.images[i] = reader.result;行有错误，因为它说Property 'images' does not exist on type 'FileReader'

images: Array<any> = [];

getImages(): void {
for (var i = 0; i < this.myData.length; i++) {
  this.myApiCalls.getImg()
    .subscribe(res => {
      var reader = new FileReader();
      reader.readAsDataURL(res);
      reader.addEventListener("loadend", function () {
        this.images[i] = reader.result;
      });       
    },
      err => {
        console.log(err.message)
      });
  }
}

我尝试的另一件事是回调，但我仍然在同一列上遇到错误，但针对不同的事情。它说'this' implicitly has type 'any' because it does not have a type annotation.

getImages(): void {
for (var i = 0; i < this.myData.length; i++) {
  this.myApiCalls.getImg()
    .subscribe(res => {
      this.readImageFile(res, function(e: any) {
        this.fields[i] = e.target.result;
      });       
    },
      err => {
        console.log(err.message)
      });
  }
}

readImageFile(response: Blob, callback: any): void {
   var reader = new FileReader();
   reader.readAsDataURL(response);
   reader.onloadend = callback 
} 

所以我得到了正确返回的数据，但问题是我无法将它保存到数组中。如果你们能够帮助我解决这个问题，我会很高兴。 谢谢。

Answer 1

为什么要将其转换为 base64？您可以使用const blobUrl = URL.createObjectURL(blob) 从blob 创建一个url（只要记住在它不与URL.revokeObjectURL(blobUrl) 一起使用后撤销该url 以释放内存）？我问是因为它更有效。

但是由于上下文问题，您的代码失败了（this 不是您所期望的）。回调中的上下文是阅读器对象。错误Property 'images' does not exist on type 'FileReader' 中有一条线索——它表明this 是FileReader 的一个实例。

编辑：您还应该在循环i 上使用let，否则i 将不是您在回调中所期望的。

如果要保留外部范围上下文，请使用箭头函数：

getImages(): void {
for (let i = 0; i < this.myData.length; i++) {
  this.myApiCalls.getImg()
    .subscribe(res => {
      var reader = new FileReader();
      reader.addEventListener("load", () => {
        this.images[i] = reader.result;
      });
      reader.readAsDataURL(res);
    },
      err => {
        console.log(err.message)
      });
  }
}

Answer 2

这里更新了您的代码，请尝试一次。

images: any[]= [];

getImages(): void {
for (var i = 0; i < this.myData.length; i++) {
  this.myApiCalls.getImg()
    .subscribe(res => {
      this.readImageFile(i,res);
    },
      err => {
        console.log(err.message)
      });
  }
//here iam logged console. See values saved array or not.
console.log("Print your Value here once",this.images);
}

readImageFile(indexVal:number,response: Blob): void {
      let self = this;
      var reader = new FileReader();
      reader.readAsDataURL(response);
      reader.onloadend = function () {
          self.images[indexVal] = reader.result;
        }
} 

尝试一次，然后告诉我。 我希望它对解决您的问题有用。 我已经准备好与此功能相关的工作

谢谢，

穆图库马尔

Answer 3

试试这个答案，它可能会有所帮助https://stackoverflow.com/a/16245768/8350917