HttpClient를 사용하여 이미지 업로드

HttpClient를 사용하여 이미지 업로드

문제

각도가 있는 이미지를 API에 업로드하려고 합니다.Content-Type: multipart/form-data(v4+ 포함).지원되나요?어떻게 하는 거지?

업로드는 다음과 함께 작동합니다.XMLHttpRequest모듈을 사용하는 경우.사용자 지정 방법을 사용하고 싶습니다.HttpClientAPI에 액세스하기 위한 다른 방법과 함께 http 서비스에 넣을 수 있습니다.

제가 지금까지 시도한 것은 다음과 같습니다.

model.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class ModelService {
  constructor(private http: HttpClient) { }

  public async updateAvatar(file: File): Promise<void> {

    // headers
    const headers = new HttpHeaders()
      .append('Content-Type', 'multipart/form-data');

    const formData: FormData = new FormData();
    formData.append('avatar', file, file.name);

    const response: HttpResponse = await this.http
      .patch('https://example.com/avatar', formData, { headers, observe: 'response' })
      .toPromise();

    console.log(response.status);
  }
}

아바타-카운터.컴포넌트.ts

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { ModelService } from './path/to/model.service';

@Component({
  selector: 'app-avatar-uploader',
  template: '<input type="file" #fileInput (changes)="uploadAvatar()">'
})
export class AvatarUploaderComponent implements OnInit {

  @ViewChild('fileInput') fileInputElement: ElementRef;

  constructor() { }

  ngOnInit() { }

  public async uploadAvatar() {
    const file: File = this.fileInputElement.nativeElement.files[0];

    await this.model.updateAvatar(file);
  }

}

이 버전은 API로 요청을 전송합니다.multer(파싱을 위한 라이브러리)multipart/form-datarequests)가 요청을 구문 분석하지 못합니다.

그래서 제 생각에 저는 그것을 사용합니다.HttpClient잘못되었거나 지원되지 않습니다.multipart/form-data요청한다.

Base64 인코딩 파일을 보내거나 사용할 수 있을 것 같습니다.XmlHttpRequest하지만 저는 구체적으로 질문합니다.HttpClient그것을 할 수 있는 능력.

저에게 요령은 컨텐츠 유형을 멀티파트/폼 데이터로 설정하지 않는 것이었습니다.하지만 그것은 저를 위해 자동적으로 이루어졌습니다.

<label>
  <input type="file" (change)="setFiles($event)" style="display:none" multiple/>
  <a mat-raised-button color="primary">
    <mat-icon>file_upload</mat-icon>
    Select Documents
  </a>
</label>

멀티파트/폼 데이터를 업로드하는 코드입니다.머리글을 설정할 필요가 없습니다.

private setFile(event) {
    let files = event.srcElement.files
    if (!files) {
      return
    }

    let path = `${environment.celoApiEndpoint}/api/patientFiles`
    let data = {"patientData": {
      "uid": "",
      "firstName": "",
      "lastName": "",
      "gender": "Not Specified",
      "dateOfBirth": ""
    }}
    // let headers = new HttpHeaders()
    //   .set('content-type', 'multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW')
    // let headers = new HttpHeaders().set('content-type', 'multipart/form-data')
    const formData: FormData = new FormData();

    for (let i = 0; i < files.length; i++) {
      formData.append(i.toString(), files[i], files[i].name);
    }
    formData.append("data", JSON.stringify(data));
    this.http.post(path, formData).subscribe(
      (r)=>{console.log('got r', r)}
    )
  }

각도에 문제가 있다고 생각하지 않습니다. 동일한 코드를 사용하여 서버에 파일을 전송했습니다(백엔드에서 스프링을 사용하고 있습니다). 유일한 차이점은 요청을 준수하지 않거나 응답을 약속으로 변환하지 않는다는 것입니다.

아래 내 코드 참조:

let formData: FormData = new FormData();
formData.append('file', this.fileToUpload);

this.http.put(this.usersUrl, formData).subscribe(
    data => {
        console.log(data); 
    },
    error => {
        console.log(error);
    }
);

언급URL : https://stackoverflow.com/questions/46059226/upload-image-with-httpclient