使用 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

试试这个答案，可能会有帮助

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

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

但是您的代码由于上下文问题而失败（this 不是您所期望的）。回调中的上下文是 reader 对象。错误 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)
      });
  }
}

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

Problems with saving values to array using FileReader

image

filereader

typescript

angular