Конвертируйте загруженный файл в base64 в угловой сервис

Question

Я пытаюсь преобразовать загруженный CSV-файл в базу 64 в угловой службе.Если я использую тот же метод, он отлично работает в компоненте, но когда я звоню из службы, он получает нулевое значение.

Компонент

public upload(files) {   
      this.uploadedFile = this.service.getBase64(this.file); // This does not work
      // this.getBase64(this.file); // This works if method is in same component
    }
  }

  getBase64() {
    const myReader = new FileReader();
    myReader.onloadend = e => {
      this.uploadedFile = myReader.result.toString().split(',')[1];
    };
    myReader.readAsDataURL(this.file);
  }

Это работает нормально, но теперь, когда явызов метода с использованием сервиса, он не работает

Сервис

  getBase64(file: any){
    const myReader = new FileReader();
    let base64File: any;
    myReader.onloadend = e => {
      base64File = myReader.result.toString().split(',')[1];
    };
    myReader.readAsDataURL(file);
    return base64File;
  }

Сервис возвращает нулевое / неопределенное значение.Как я могу сохранить функцию base64 на уровне сервиса.Сервис работает правильно, так как внутри сервиса несколько функций.

Answer 1

Вы используете асинхронный метод и пытаетесь вернуть синхронные данные.Он работает внутри того же компонента, потому что вы не используете оператор return, вы прямо устанавливаете новое значение в его переменной (вы можете заменить this.uploadedFile = this.service.getBase64(this.file); на this.service.getBase64(this.file);, это будет иметь тот же результат, так как ваш метод ничего не возвращает)

В другом классе вы должны использовать Предмет, чтобы иметь возможность подписаться на него:

// Service
uploadedFile$: Subject<string> = new Subject<string>();

updateBase64(file: any) {
  const myReader = new FileReader();
  myReader.onloadend = e => {
    this.uploadedFile$.next(myReader.result.toString().split(',')[1]);
  };
  myReader.readAsDataURL(file);
}

getBase64(): Observable<string> {
  return this.uploadedFile$.asObservable();
}



// Component

base64Subscribtion: Subscribtion;
constructor(public service: MyAppService) {
    this.base64Subscribtion = this.service.getBase64()
        .subscribe(result => this.uploadedFile = result); // receive new value from service when it is ready
}

public upload(files) {   
  this.service.updateBase64(this.file); // asks the service to update its value
}

ngOnDestroy() {
  this.base64Subscribtion.unsubscribe(); // since a Subject never ends, you have to cancel manually subscribtion, otherwise your component will never be able to die (memory leak)
}