Angularの HttpClient
で画像をAPI Content-Type: multipart/form-data
(angular v4 +)にアップロードしようとしています。サポートされていますか?どうやるか?
ng2-fancy-image-uploader
のようなモジュールを使用すると、アップロードはXMLHttpRequest
で機能します。 APIにアクセスするための他のメソッドと一緒にhttpサービスに入れることができるHttpClient
を持つカスタムメソッドを使用したいと思います。
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);
}
}
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-data
リクエストを解析するためのライブラリ)はリクエストの解析に失敗します。
だから、HttpClient
を誤って使用したか、multipart/form-data
リクエストをサポートしていないと思います。
Base64でエンコードされたファイルを送信するか、XmlHttpRequest
を使用できますが、HttpClient
の機能について具体的に尋ねます。
私にとっての秘trickは、content-typeをmultipart/form-dataに設定することではありませんでした。しかし、それは私のために自動的に行われました。
<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>
Multipart/form-dataをアップロードするコードを次に示します。ヘッダーを設定する必要はありません。
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)}
)
}
私は問題が角度にあるとは思わない、同じコードを使用してサーバーにファイルを送信しました(バックエンドでスプリングを使用しています)、唯一の違いはリクエストを観察していないか、応答をpromiseに変換していないことです。
以下の私のコードを参照してください:
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);
}
);