Хранение Angularfire2 - процентное изменение - PullRequest
Новая
       7

Хранение Angularfire2 - процентное изменение

0 голосов
/ 08 октября 2018

Я пытаюсь создать службу для загрузки изображений из любого места в моем приложении Angular.

Мой сервис использует функцию «Puttring» для загрузки изображения base64 в базу данных Firebase, и я хочу отображать ход выполненияпри каждой загрузке.

В рамках службы я могу получить доступ к Обнаруживаемому «процентному изменению», однако я хочу получить доступ к этому наблюдаемому с помощью компонента.Проблема в том, что как только я возвращаю задачу загрузки компонентам, а затем пытаюсь получить доступ к функции, она больше не работает.Кажется, я могу получить доступ к этому наблюдаемому непосредственно из службы, а не внутри компонента.

Это лишает смысла делать это, поскольку я не могу прикрепить этот прогресс к графическому интерфейсу и показать своему пользователю прогресс. 

export class UploadService {

  task: AngularFireUploadTask;
  percentage : Observable<number>;

  constructor(private firestoreService: FirestoreService,
    private afStorage: AngularFireStorage) { }




  async processBase64Image(uri: string, type: string, uid : string) {
    try {
      let data = await Filesystem.readFile({
        path: uri
      })

      var metadata = { contentType: 'image/jpeg' };

      const path = type + '/' + uid + `_${new Date().getTime()}.jpg`;
      return this.afStorage.ref(path).putString(data.data, 'base64', metadata);
    }
    catch (error) {
      console.log(error);
    }
  }

  uploadBase64File(path: string, data: string, metadata? : any) {
    console.log('Uploading To Firebase');
    this.task = this.afStorage.ref(path).putString(data, 'base64', metadata);
    this.percentage = this.task.percentageChanges();
    return this.task;
    //HERE I CAN EASILY ACCESS THE OBSERVABLE FUNCTION
  }

Мне нужно получить доступ к нему из компонента: 

 @Component({
  selector: 'app-add-skill',
  templateUrl: './add-skill.page.html',
  styleUrls: ['./add-skill.page.scss'],
})
export class AddSkillPage implements OnInit {



  task: AngularFireUploadTask;



  constructor(private userService: UserService,
    private firestoreService: FirestoreService,
    private uploadService: UploadService) { }

    uploadSkill() {
         this.uploadService.processBase64Image(this.photoUri, 'skills', this.user.uid)
  .then((task) => {
    task. <--- HERE I CANNOT ACCESS THE FUNCTION --- WHY?
    console.log('image successfully uploaded');
  })
  .catch(error => {
    console.log('IMAGE CAPTURE ERROR');
    console.log(error);
    this.showToast('There was an error uploading your image');
  })

}}

...