Загрузить файл на S3, но вернуть наблюдаемый

Как я могу гарантировать, что следующий метод возвращает наблюдаемое?

  uploadFile(file, filename) {
    const contentType = file.type;
    const bucket = new S3(
      {
        accessKeyId: environment.awsAccessKeyId,
        secretAccessKey: environment.awssecretAccessKey,
        region: environment.awsRegion
      }
    );
    const params = {
      Bucket: environment.awsBucket,
      Key: environment.awsKey + filename,
      Body: file,
      ACL: 'public-read',
      ContentType: contentType
    };

    bucket.upload(params, function (err, data) {
      if (err) {
        this.logger.debug('There was an error uploading your file: ', err);
        return null;
      }
      this.logger.debug('Successfully uploaded file.', data);
      return data;
    });
  }

Я хотел бы вызвать его из компонента следующим образом и зафиксировать возвращаемый результат:

  this.ngxLoader.start();
  this.uploadService.uploadFile(newFile, sermonName), ((data) => {
    if (data) {
      // this.sermon.id = data.id;
      // this.logger.debug(`Posted file: ${JSON.stringify(data)}`);
      // this.logger.debug(`Updating file id: ${JSON.stringify(this.sermon.id)}`);
      // this.update();
      this.ngxLoader.stop();
    }
  }, error => {
    this.ngxLoader.stop();
    this.modalService.displayMessage('Oops!', error.message);
  });
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
0
501
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Изменения для возврата результата/ошибки как Observable


return Observable.create(observer => {
  bucket.upload(params, function (err, data) {
    if (err) {
      this.logger.debug('There was an error uploading your file: ', err);
      observer.error(err);
    }
    this.logger.debug('Successfully uploaded file.', data);
    observer.next(data);
    observer.complete();
  });
});

Изменения для обработки результата/ошибки в компоненте


this.uploadService.uploadFile(newFile, sermonName)
.subscribe(
  data => {
    if (data) {
      // this.sermon.id = data.id;
      // this.logger.debug(`Posted file: ${JSON.stringify(data)}`);
      // this.logger.debug(`Updating file id: ${JSON.stringify(this.sermon.id)}`);
      // this.update();
      this.ngxLoader.stop();
    }
  }, 
  error => {
    this.ngxLoader.stop();
    this.modalService.displayMessage('Oops!', error.message);
  });

конечно, нам нужно импортировать ниже.

import { Observable } from 'rxjs';

также добавьте явный возврат функции для проверки типов.

uploadFile(file, filename): Observable<any> {

Другие вопросы по теме