Angular - Как сделать сервис загрузки файлов?

Question

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

// service
export class UploadService {

  constructor(private alertService: AlertService) {}

  uploadPhoto(event: Event) {
      const file = (event.target as HTMLInputElement).files[0];

      if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg') {
          const reader = new FileReader();
          let url;
          reader.onload = () => {
              url = reader.result;
          };
          reader.onerror = (error: any) => {
              this.alertService.error(`Error ao carregar a imagem: ${error}`);
              return;
          };
          reader.readAsDataURL(file);
          return { File: file, Url: url };
      } else {
          this.alertService.error('Formato inválido. Somente imagens do formato Png, Jpeg e Jpg são permitidos.');
          return;
      }
  }
}

// component
uploadBanner(event: Event) {
  const Upload = this.uploadService.uploadPhoto(event);
  if (Upload) {
    this.urlBanner = Upload.Url;
    this.shop.banner = Upload.File;
  }
}

Как мне восстановить url и file?

Answer 1

Вы рассматриваете это как синхронную операцию, но это не так.Вы должны либо использовать Promise, либо Observable, чтобы решить эту проблему.И возвращать данные при возникновении события onload.

export class UploadService {

  constructor(private alertService: AlertService) {}

  uploadPhoto(event: Event): Promise<{file: any, url: string}> { {
    return new Promise((resolve, reject) => {
      const file = (event.target as HTMLInputElement).files[0];

      if (file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/jpg') {
        const reader = new FileReader();
        let url;
        reader.onload = () => {
          resolve({file, url: reader.result})
        };
        reader.onerror = (error: any) => {
          this.alertService.error(`Error ao carregar a imagem: ${error}`);
          reject(error)
        };
        reader.readAsDataURL(file);
      } else {
        let error = 'Formato inválido. Somente imagens do formato Png, Jpeg e Jpg são permitidos.'
        this.alertService.error(error);
        reject(error);
      }
    }
  }
}

Компонент

// component
uploadBanner = async (event: Event) => {
  const url = await this.uploadService.uploadPhoto(event);
  console.log(url)
}