Angular 2/4 FileReader Service

1

Я пытался создать Angular 2/4 Service с возможностью загрузки файлов. Я не мог найти решение на каком-либо ресурсе, поэтому я, вероятно, хочу попросить вас, ребята. Итак, идея где-то в Компоненте есть поле ввода с типом = file. Он имеет директиву (изменение) = "uploadFile ($ event)". В файле.ts:

uploadFile(event) {
   this.images.push(this.uploadImgService.uploadImage(event));
}

UploadImgService выглядит так:

private img: string;

uploadImage(e) {
  const file = e.target.files[0];
  const pattern = /image-*/;

  if (!file.type.match(pattern)) {
    alert('You are trying to upload not Image. Please choose image.');
    return;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onloadend = () => {
    this.img = reader.result;
  };

  return this.img;
}

Итак, я понимаю, что операция выполняется async, но я не могу понять, как обернуть ее так, как она могла ждать, пока img будет загружаться. Я думаю, что это результат отсутствия навыков :( Когда я отправляю этот код в компонент, он, безусловно, работает, но моя идея - сделать сервис. Кроме того, я просто новичок в Angular. Итак, если есть лучший способ позаботьтесь об этой идее, я был бы рад услышать от вас. Спасибо!

Теги:
angular
filereader
angular2-services

1 ответ

3
Лучший ответ

Вы должны вернуть наблюдаемое так:

uploadImage(e) {
  const file = e.target.files[0];
  const pattern = /image-*/;

  if (!file.type.match(pattern)) {
    alert('You are trying to upload not Image. Please choose image.');
    return;
  }
  const reader = new FileReader();
  reader.readAsDataURL(file);
  return Observable.create(observer => {
    reader.onloadend = () => {
      observer.next(reader.result);
      observer.complete();
    };
  });
}  

А в компоненте подпишитесь на наблюдаемое:

this.service.uploadImage(event).subscribe((img) => {
    // Do what you want with the image here
});
  • 0
    О, спасибо вам большое! да, это очень помогло мне! Кроме того, я хочу знать, правильно ли я помещаю такие вещи в Сервис? Есть ли другой способ справиться с этим?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню