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

我在做Angular4项目。我从API调用中得到返回的Blob，然后将其转换为base64，但无法将其保存到图片数组中（因此我可以稍后使用

*ngFor

显示它）

以下是我的API调用：

getImg（）：可观察{
const path=*无法显示此部分*；
返回this.http.get（路径，{responseType:“blob”}）；
}

以下是我迄今为止所做的尝试：

此函数在This.images[i]=reader.result的第

行有错误，因为它说类型“FileReader”上不存在属性“images”

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

因此，我正确地返回了数据，但问题是我无法将其保存到阵列中。如果你们能帮我解决这个问题，我会很高兴的。

---

谢谢。

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

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

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

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

图像：任意[]=[]；
getImages（）：void{
对于（var i=0；i{
这个.readImageFile（i，res）；
},
错误=>{
console.log（错误消息）
});
}
//这里是iam日志控制台。请查看是否保存了数组中的值。
log（“在这里打印一次您的值”，this.images）；
}
readImageFile（indexVal:number，response:Blob）：无效{
让自我=这个；
var reader=new FileReader（）；
reader.readAsDataURL（响应）；
reader.onloadend=函数（）{
self.images[indexVal]=reader.result；
}
} 

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

谢谢

---

Muthukumar

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

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

图像：任意[]=[]；
getImages（）：void{
对于（var i=0；i{
这个.readImageFile（i，res）；
},
错误=>{
console.log（错误消息）
});
}
//这里是iam日志控制台。请查看是否保存了数组中的值。
log（“在这里打印一次您的值”，this.images）；
}
readImageFile（indexVal:number，response:Blob）：无效{
让自我=这个；
var reader=new FileReader（）；
reader.readAsDataURL（响应）；
reader.onloadend=函数（）{
self.images[indexVal]=reader.result；
}
} 

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

谢谢

---

Muthukumar

为什么要将其转换为base64？您可以使用

const blobUrl=url.createObjectURL（blob）

从blob创建url（只需记住在未与

url.revokeObjectURL（blobUrl）

一起使用后撤销url以释放mem即可）？我这样问是因为效率更高

但是您的代码由于上下文问题而失败（

这不是您所期望的）。回调中的上下文是reader对象。错误中有一条线索，
属性“images”在类型“FileReader”上不存在
-它表明
此
是
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)
      });
  }
}

getImages（）：void{
for（设i=0；i{
var reader=new FileReader（）；
reader.addEventListener（“加载”，（）=>{
this.images[i]=reader.result；
});
reader.readAsDataURL（res）；
},
错误=>{
console.log（错误消息）
});
}
}
为什么要将其转换为base64？您可以使用
const blobUrl=url.createObjectURL（blob）
从blob创建url（只需记住在未与
url.revokeObjectURL（blobUrl）
一起使用后撤销url以释放mem即可）？我这样问是因为效率更高

但是您的代码由于上下文问题而失败（
这不是您所期望的）。回调中的上下文是reader对象。错误中有一条线索，
属性“images”在类型“FileReader”上不存在
-它表明
此
是
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)
      });
  }
}

getImages（）：void{
for（设i=0；i{
var reader=new FileReader（）；
reader.addEventListener（“加载”，（）=>{
this.images[i]=reader.result；
});
reader.readAsDataURL（res）；
},
错误=>{
console.log（错误消息）
});
}
}
Hm，当前我收到错误
self.images[indexVal]
在控制台中未定义。日志您是否像此控制台一样打印。日志（“在此打印一次您的值”，this.images）；？reader.onloadend=function（）{//请首先在此处记录您的输出是否已获得。请在pls.console.log（“reader Value”，reader.result）；self.images[indexVal]=reader.result；}Karnan感谢您的帮助。问题如下面所述，使用
var i
而不是
let i
时出现了问题，正因为如此，索引没有达到预期的效果。请这样更改，然后再试一次，因为您的输出是预期的HM，目前我收到了错误
self.images[indexVal]
在console.log中未定义。您是否像此console.log一样打印（“在此处打印一次您的值”，this.images）；？reader.onloadend=function（）{//请在这里首先记录您的输出是否已获得，然后请pls.console.log（“reader Value”，reader.result）；self.images[index