Как загрузить изображение / файл со значением formgroup в API?

Часть 1. Загрузка файлов в API через FormData

В вашем сервисном файле вроде upload.service.ts вам нужно создать функцию для загрузки файлов методом POST. Вот пример для этой функции:

getUploadHeaders() {
let headers = new Headers({'Accept': 'application/json'});
headers.delete('Content-Type');
return headers;
}

addNewPost(newPost: FormData): Observable<FormData> {
const endpoint = 'https://yourApiUrl.com';
return this.http
.post(endpoint, newPost, { headers: this.getUploadHeaders() })
.catch((e) => this.handleError(e));
}

И теперь вы должны создать функцию загрузки в вашем компоненте, например upload.component.ts, Вот пример для функции загрузки с FormData.

fileToUpload: File = null;

constructor(private uploadService: UploadService) { }

handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
}saveFileToApi() {
const saveForm: FormData = new FormData();
if (this.fileToUpload) {
// if you need/want to append other fields to API endpoint
saveForm.append('name', this.name);
saveForm.append('link', this.link);
saveForm.append('description', this.description);
// if you have to append number
saveForm.append('age', this.age.toString());
// append image
saveForm.append('fileFieldNameOnYourApi', this.fileToUpload, this.fileToUpload.name);
}

this.uploadService.addNewPost(saveForm).subscribe(() => {
console.log('Upload success!');
}, error => {
console.log('Upload failed!');
});
}

В saveFileToApi-функции вы также можете добавлять другие поля вашей формы. Помните, что вы должны преобразовать числовые поля в строку. Вот Вы можете прочитать больше об использовании, если объекты FormData.

Для загрузки файла через FormData вам нужно 3 параметра: propertyName на конечной точке API, файл и имя этого файла.
И в твоем upload.component.html вам нужно иметь такую ​​форму:

<form (ngSubmit)="onSubmit()">
<label for="fileField">Chose file to upload</label>
<input type="file"id="fileField"name="fileField"(change)="handleFileInput($event.target.files)">
<button type="submit">Speichern</button>
</form>

Для более подробной информации о FormData читайте этот и для получения дополнительной информации о FormData.append () прочитайте этот.

Часть 2. Получить загруженное изображение из API

Вы должны установить responseType: ResponseContentType.Blob в настройках GET-запроса, потому что вы можете получить изображение в виде BLOB-объекта и преобразовать его позже в исходный код в формате base64. Вы код выше не хорошо. Если вы хотите сделать это правильно, то создайте отдельный сервис для получения изображений из API. Из-за того, что нехорошо вызывать HTTP-запрос в компонентах.

Вот рабочий пример:

Создайте image.service.ts или использовать upload.service.ts из части 1 (возможно, вы можете дать этому сервису другое имя) и поставить следующий код:

    getImage(imageUrl: string): Observable<File> {
return this.http
.get(imageUrl, { responseType: ResponseContentType.Blob })
.map((res: Response) => res.blob());
}

Теперь вам нужно создать какую-то функцию в вашем image.component.ts чтобы получить изображение и показать его в формате HTML.

Для создания изображения из Blob вам необходимо использовать JavaScript FileReader,
Вот функция, которая создает новые FileReader и прослушайте событие загрузки FileReader. В результате эта функция возвращает изображение в кодировке base64, которое вы можете использовать в атрибуте img src:

imageToShow: any;

createImageFromBlob(image: Blob) {
let reader = new FileReader();
reader.addEventListener("load", () => {
this.imageToShow = reader.result;
}, false);

if (image) {
reader.readAsDataURL(image);
}
}

Теперь вы должны использовать свои созданные ImageService чтобы получить изображение от API. Вы должны подписаться на данные и предоставить эти данные createImageFromBlob-функции. Вот пример функции:

getImageFromService() {
this.isImageLoading = true;
this.imageService.getImage(yourImageUrl).subscribe(data => {
this.createImageFromBlob(data);
this.isImageLoading = false;
}, error => {
this.isImageLoading = false;
console.log(error);
});
}

Теперь вы можете использовать свой imageToShowпеременная в шаблоне HTML, как это:

<img [src]="imageToShow"alt="Place image title"*ngIf="!isImageLoading; else noImageFound">
<ng-template #noImageFound>
<img src="fallbackImage.png" alt="Fallbackimage">
</ng-template>

Я надеюсь, что это описание понятно для понимания, и вы можете использовать его в своем проекте.