代码之家 › 专栏 › 技术社区 › HC1122

使用文件读取器将值保存到数组时出现的问题

filereader typescript image angular

0

HC1122 · 技术社区 · 7 年前

我在做安格拉4项目。从我的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 
}

所以我得到了正确返回的数据,但问题是我无法将其保存到数组中。如果你们能帮我解决那个问题,我会很高兴的。谢谢您.

3 回复 | 直到 7 年前

1

nanobar 7 年前

为什么要将其转换为base64?您可以使用 const blobUrl = URL.createObjectURL(blob) (只要记住在没有与 URL.revokeObjectURL(blobUrl) )?我问是因为这样更有效率。

但由于上下文问题,您的代码失败了( this 不是你期望的那样)。回调中的上下文是reader对象。错误中有线索 Property 'images' does not exist on type 'FileReader' -这表明 这 是 FileReader .

编辑:您还应该使用 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)
      });
  }
}

2

1

Karnan Muthukumar 7 年前

这里更新了你的代码,请再试一次。

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

试试这个让我知道。我希望这对解决你的问题有用。我已经准备好了

谢谢,

穆图库马

3

0

Anthony DiTomasso 7 年前

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