Как облегчить загрузку изображений с помощью Angular

1656542049 kak oblegchit zagruzku izobrazhenij s pomoshhyu angular

Филипп Джерга

1*dxawCwfllIh8ljUcRtwnXg

Это вторая часть учебника о том, как загрузить изображение на Amazon S3. Первую часть можно найти здесь. В данной статье мы рассмотрим угловую часть.

Вы также можете просмотреть мой пошаговый видеоурок по загрузке изображения. Ссылка предоставлена ​​внизу настоящей статьи.

1. Сначала создайте шаблон

Во-первых, мы хотим создать многократный компонент, который будет легко подключаться к другим компонентам.

Давайте начнем с простого шаблона HTML для нашего ввода. Не забудьте применить стили на ваш выбор или вы можете получить их из моего репозитория GitHub.

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>

Важно здесь а типа ввод, установленный на a файл. The Принять атрибут определяет приемлемые файлы для ввода. Изображение/* указывает, что мы можем выбрать изображение любого типа с помощью этого входа. #imageInput является ссылкой на вход, на котором мы можем получить доступ к загруженным файлам.

А Изменить событие запускается при выборе файла. Давайте посмотрим на код класса.

2. Не забудьте о коде компонента

class ImageSnippet {
  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {

  selectedFile: ImageSnippet;

  constructor(private imageService: ImageService){}

  processFile(imageInput: any) {
    const file: File = imageInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event: any) => {

      this.selectedFile = new ImageSnippet(event.target.result, file);

      this.imageService.uploadImage(this.selectedFile.file).subscribe(
        (res) => {
        
        },
        (err) => {
        
        })
    });

    reader.readAsDataURL(file);
  }
}

Давайте разберем этот код. Вы можете увидеть в processFile что мы получаем входное изображение, которое мы отправили из изменить событие. Письмом imageInput.files[0] мы получаем доступ к первому файл. Нам нужен а читатель чтобы получить доступ к дополнительным свойствам файла. За звонком readAsDataURL, мы можем получить представление изображения в base64 в функции обратного вызова addEventListener мы подписывались раньше.

В функции обратного вызова мы создаем экземпляр ImageSnippet. Первый value – это представление base64 изображения, которое мы отразим позже на экране. Секунда value – это сам файл, который мы вышлем на сервер для загрузки в Amazon S3.

Теперь нам просто нужно предоставить этот файл и послать запрос через сервис.

3. Нам также нужна услуга

Это не было бы приложение Angular без службы. Служба будет отвечать за отправку запроса на наш сервер Node.

export class ImageService {

  constructor(private http: Http) {}


  public uploadImage(image: File): Observable<Response> {
    const formData = new FormData();

    formData.append('image', image);

    return this.http.post('/api/v1/image-upload', formData);
  }
}

Как я сказал вам в предыдущей лекции, нам нужно отправить изображение как часть данные формы. Мы добавим изображение под ключом an изображение для формирования данных (тот же ключ, который мы настроили раньше в Node). Наконец, нам просто нужно отправить запрос на сервер из formData в полезном грузе.

Теперь мы можем отмечать. Это! Изображение отправлено для загрузки!

В следующих строчках я предоставим дополнительный код для лучшего пользования.

4. Дополнительные обновления UX

class ImageSnippet {
  pending: boolean = false;
  status: string = 'init';

  constructor(public src: string, public file: File) {}
}

@Component({
  selector: 'bwm-image-upload',
  templateUrl: 'image-upload.component.html',
  styleUrls: ['image-upload.component.scss']
})
export class ImageUploadComponent {

  selectedFile: ImageSnippet;

  constructor(private imageService: ImageService){}

  private onSuccess() {
    this.selectedFile.pending = false;
    this.selectedFile.status="ok";
  }

  private onError() {
    this.selectedFile.pending = false;
    this.selectedFile.status="fail";
    this.selectedFile.src="";
  }

  processFile(imageInput: any) {
    const file: File = imageInput.files[0];
    const reader = new FileReader();

    reader.addEventListener('load', (event: any) => {

      this.selectedFile = new ImageSnippet(event.target.result, file);

      this.selectedFile.pending = true;
      this.imageService.uploadImage(this.selectedFile.file).subscribe(
        (res) => {
          this.onSuccess();
        },
        (err) => {
          this.onError();
        })
    });

    reader.readAsDataURL(file);
  }
}

Мы добавили новые свойства к ImageSnippet: ожидает рассмотрения и Статус. Ожидает может быть false или true, в зависимости от того, загружается ли сейчас изображение. Статус является результатом процесса загрузки. Это может быть в порядке или НЕ УДАЕТСЯ.

OnSuccess и onError вызываются после скачивания изображения и устанавливают статус изображения.

Ладно, теперь давайте посмотрим на обновленный файл шаблона:

<label class="image-upload-container btn btn-bwm">
  <span>Select Image</span>
  <input #imageInput
         type="file"
         accept="image/*"
         (change)="processFile(imageInput)">
</label>


<div *ngIf="selectedFile" class="img-preview-container">

  <div class="img-preview{{selectedFile.status === 'fail' ? '-error' : ''}}"
       [ngStyle]="{'background-image': 'url('+ selectedFile.src + ')'}">
  </div>

  <div *ngIf="selectedFile.pending" class="img-loading-overlay">
    <div class="img-spinning-circle"></div>
  </div>

  <div *ngIf="selectedFile.status === 'ok'" class="alert alert-success"> Image Uploaded Succesfuly!</div>
  <div *ngIf="selectedFile.status === 'fail'" class="alert alert-danger"> Image Upload Failed!</div>
</div>

Здесь мы отображаем наше загруженное изображение и ошибки в зависимости от государство с изображение. Когда изображение ожидает рассмотрения, мы также показываем хорошее вращающееся изображение, чтобы уведомить пользователя об активности загрузки.

5. Добавьте немного стиля

Стили не являются предметом внимания этого учебника, поэтому вы можете получить все стили SCSS по этой ссылке.

Работа выполнена! 🙂 Это должно быть это для простой загрузки изображения. Если что-то непонятно, убедитесь, что вы сначала просмотрели первую часть этого руководства.

Если вам нравится этот учебник, посмотрите мой полный курс с Udemy — Полное руководство по Angular, React и Node | Приложение в стиле Airbnb.

Завершенный проект: Мой репозиторий GitHub

Видео лекция: Учебник YouTube

Здоровья,

Филипп

Добавить комментарий

Ваш адрес email не будет опубликован.