Проблемы с сохранением значений в массив с помощью FileReader - PullRequest
Новая
       22

Проблемы с сохранением значений в массив с помощью FileReader

0 голосов
/ 13 июня 2018

Я работаю над проектом Angular4.Мне возвращают Blob из моего вызова API, затем я конвертирую его в 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 
}

Итак, я вернул данные правильно, но проблема в том, что мне не удалось сохранить их в массив.Если вы, ребята, сможете помочь мне решить эту проблему, я был бы очень счастлив.Спасибо.

Ответы [ 2 ]

0 голосов
/ 13 июня 2018

Почему вы конвертируете его в base64?Вы можете создать URL-адрес из BLOB-объекта с помощью const blobUrl = URL.createObjectURL(blob) (просто не забудьте отозвать URL-адрес для освобождения mem, если он не используется с URL.revokeObjectURL(blobUrl))?Я спрашиваю, потому что это более эффективно.

Но ваш код не работает из-за проблемы контекста (this не то, что вы ожидаете).Контекст внутри обратного вызова - это объект читателя.В ошибке 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)
      });
  }
}
0 голосов
/ 13 июня 2018

Здесь обновлен ваш код, попробуйте это один раз. 

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

...