web-dev-qa-db-ja.com

angular2でファイルをアップロード：空のボディ（FormData）

Angular2を使用した画像をRESTサービス（ループバック）にアップロードしようとしています。ループバックサービスは動作し（Postmanでテスト済み）、x-www-form-urlencodedヘッダーを持つファイルを受け入れます。

POSTリクエストを送信する簡略化されたサービスメソッドは次のとおりです。

public uploadFile(url : string, file: File): Observable<any> {
  let headers: Headers = new Headers();
  headers.append('Content-Type', 'application/x-www-form-urlencoded');

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

  let options: RequestOptionsArgs = { headers: headers };

  return this.http.post(url, formData, options)
  .map((res: any) => (res.text() != "" ? res.json() : {}));
}

ヘッダーをapplication/x-www-form-urlencodedに設定し、本文にファイルを含むformDataを送信していることに注意してください。

Angularでは、リクエストをhttp.postする時点まで、formDataにファイルが読み込まれ、ファイルのコンテンツが存在し、すべてうまくいきます：

リクエスト前のデータ

しかし、リクエストでは、本文は空のオブジェクトです{}：

リクエスト

AngularはJSON.stringify（formData）を実行しようとしていると思います。少なくとも、これを実行すると、出力として "{}"も取得されます。

多くの投稿がまったく同じことをしているのを見てきました（http.post（url、formData））。だから私は何が欠けていますか？

javascriptangulartypescriptform-data
10
Christoph

headers.append('Content-Type', 'multipart/form-data');を削除するだけで問題を解決できます。

こちら を参照

2017-08-24

8
Belter

これから FormDataを検査する方法？ SO回答とこれ MDNドキュメント コンソールでFormDataを出力すると、 _{}_。

FormDataは、entries()の代わりに、_for ... of_構造体で直接使用できます。for (var p of myFormData)は、for (var p of myFormData.entries())と同等です。

1
sebnukem

私の場合、formData.append（）の代わりにformData .set（）を使用しました

以下の例をご覧ください。

 UploadFile(fileToUpload: File): Observable<boolean> {
     const endpoint = 'api/image/upload';
     var formData = new FormData();
     formData.set('file', fileToUpload);
     return this._http
     .post(endpoint, formData)
     .map(() => { return true; })
     .catch((e) => this.handleError(e));
 }
0
Dimo

別の解決策は、base64を使用してバックエンド側で変換することです： `

var reader = new FileReader();
    reader.readAsDataURL(file);
    let res;
    reader.onload = function () {
    let headers = new Headers();
    headers.append("Content-type","application/x-www-form-urlencoded");
    headers.append('Accept', 'application/json');
    let options = new RequestOptions({ headers: headers });
    return this.http.post(config.serverUrl+"/index.php",
      {
         "file":reader.result}, options)
         .toPromise()
         .then(this.extractData)
         .catch(this.handleError);
      }
    };
    reader.onerror = function (error) {
        console.log('Error: ', error);
    };`
0
ET-TAOUSY Zouhair