Как мне отправить файл изображения в теле запроса POST Http вместе с другими данными формы angular 5. Backend использует пакет Intervention в Laravel

Question

Как мне отправить файл изображения в теле запроса POST Http вместе с другими данными формы angular 5. Backend использует пакет Intervention в Laravel

Это то, что я пытался реализовать

    @ViewChild('imageUpload') elem: ElementRef;fetchImage() : File{
const Imagefiles = this.elem.nativeElement
this.profileImagefile = Imagefiles.files[0];
console.log("ProfileImage",this.profileImagefile)
return this.ProfileImagefile;
}addUser(createAgent: NgForm) {

const formData: FormData = new FormData(createAgent.value);
formData.append("image", this.fetchImage(), this.fetchImage().name)
console.log("formData",formData)

console.log('formvalue', createProfile.value);
this.httpService.createProfile(createProfile.value)
.subscribe(....)

В httpService

    createProfile(data: any) {
return this.httpClient.post('agent/', data) }

Бэкэнд использует php Laravel. Выдает ошибку для данных формы, отправляемых через HTTP POST.
Через Почтальон данные могут быть отправлены, но не в состоянии сделать это из FrontEnd
Как правильно это сделать?
Спасибо

0

angular angular5 http php post

Решение

Другие решения

Я решил проблему, сначала получив все данные ngForm и добавив их в данные формы, затем добавив файл изображения к тем же данным формы.
Используется цикл for-in для получения данных ngForm.

        addUser(createAgent: NgForm) {
const formData: FormData = new FormData();
for( let val in createAgent.value  ){
formData.append(val, createAgent.value[val])
console.log(val, createAgent.value[val])
}
formData.append("image", this.fetchImage(), this.fetchImage().name);
console.log("formData",formData)
}

Затем отправьте данные этой формы на сервер

0

Источник

Accepted Answer

Я делаю это так:

uploadFile(fileType: FileType, file: File): Observable<string> {
let formData: FormData = new FormData();
formData.append('file', file);
formData.append('name', file.name.substring(0, file.name.indexOf(".")));
formData.append('extension', file.name.substring(file.name.indexOf(".") + 1, file.name.length));
formData.append('fileType', fileType);
return this.fileHttpHandler
.uploadFile(formData)
.map(response => response.json())
.catch(error => this.restErrorHandler.handleRestError(error));
}

fileHttpHandler.uploadFile () выглядит так:

public uploadFile(formData: FormData): Observable<Response> {
return this.http.post(this.restApiUtilsService.getUrl(this.FILES_API_PATH) + "/save",
formData, this.restApiUtilsService.getMultipartAuthHeaders());
}

В заголовках не нужно указывать что-либо вроде multipart — это делается автоматически. Я передаю токен аутентификации, поэтому есть getMultipartAuthHeaders. Просто не указывайте Content-Type в заголовках вообще.

0