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

此处更新了您的代码，请尝试一次。

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;
        }
}

尝试一次并告诉我。我希望它对解决你的问题很有帮助。我已准备好与此功能相关

谢谢，

Muthukumar

Answer 2

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

但是由于上下文问题导致您的代码失败（this不是您所期望的）。回调内的上下文是reader对象。错误Property 'images' does not exist on type 'FileReader'中有一条线索 - 它显示this是FileReader的实例。

修改：您还应该在循环let上使用i，否则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 3

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

使用FileReader将值保存到数组时出现问题

3 个答案: