Загружаем изображение на сервер при помощи Angular

Jun 22, 2018

По мотивам видео Angular Image Upload Made Easy и статьи Angular Image Upload

<input
    style="display: none"
    #fileInput
    type="file" (change)="onFileSelected($event)" >
<button type="button" (click)="fileInput.click()">Pick File</button>
<button type="button" (click)="onUpload()">Upload</button>

Полезная информация о файле в свойстве target объекта event:

selectedFile: File = null;

onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
}

onUpload() {
    const fd = new FormData();

    // https://developer.mozilla.org/ru/docs/Web/API/FormData/append
    fd.append('image', this.selectedFile, this.selectedFile.name);

    this.http.post('./api/test-api-for-upload', fd)
        .subscribe(res => {
            console.log('res: ', res);
        });


    // II
    // если ваш сервер поддерживает прием бинарных файлов, то вы можете отправить файл следующим образом:
    // this.http.post('./api/test-api-for-upload', this.selectedFile)

}

selectedFile: File = null;

onFileSelected(event) {
    this.selectedFile = <File>event.target.files[0];
}

onUpload() {
    const fd = new FormData();

    fd.append('image', this.selectedFile, this.selectedFile.name);

    // еще больше:
    // давайте сконфигурируем объект request, чтобы следить за прогрессом загрузки
    this.http.post('./api/test-api-for-upload', fd, {
        reportProgress: true,
        observe: 'events'
    })
    .subscribe(event => {
        // подключим HttpEventType
        // import { HttpClient, HttpEventType } from '@angular/common/http';
        // и далее мы можем сделать проверку
        if (event.type == HttpEventType.UploadProgress) {
            console.log('Upload Progress: ', Math.round(event.loaded / event.total * 100) + '%');
        } else (event.type == HttpEventType.Response) {
            console.log(event);
        }
    });

}

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