私はこのことについて多くの質問があります知っているが、私は仕事にこれを取得することはできません$ HTTP

Question

を使用して角度とマルチパート/フォームデータファイルを送信：私は入力からファイルをアップロードしたい

サーバーのマルチパート/フォームデータ

私は2つのアプローチを試みました。最初：

headers: { 
    'Content-Type': undefined 
}, 

画像

Content-Type:image/png 

ため、それはマルチパート/フォームデータ

および他されるべきである：

headers: { 
    'Content-Type': multipart/form-data 
}, 

しかし、これは私が手動で挿入されるべきではないと信じboundryヘッダを要求...

この問題を解決するにはどうすればよい方法ですか？ 私はあなたが

$httpProvider.defaults.headers.post['Content-Type'] = 'multipart/form-data; charset=utf-8'; 

を行うことができますことを読んだ。しかし、私はすべての私の記事は、マルチパート/フォームのデータになりたくありません。デフォルトでは、JSON

Answer 1

がいるFormDataオブジェクトを見てみましょうする必要があります： https://developer.mozilla.org/en/docs/Web/API/FormData

this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
     }) 
     .error(function(){ 
     }); 
    } 

Answer 2

はここで破棄された角度の4 & 5. TransformRequestとangular.identityの更新された答えです。 1つのリクエストでファイルをJSONデータと結合する機能も含まれています。

角度5溶液：

import {HttpClient} from '@angular/common/http'; 

uploadFileToUrl(files, restObj, uploadUrl): Promise<any> { 
    // Note that setting a content-type header 
    // for mutlipart forms breaks some built in 
    // request parsers like multer in express. 
    const options = {} as any; // Set any options you like 
    const formData = new FormData(); 

    // Append files to the virtual form. 
    for (const file of files) { 
    formData.append(file.name, file) 
    } 

    // Optional, append other kev:val rest data to the form. 
    Object.keys(restObj).forEach(key => { 
    formData.append(key, restObj[key]); 
    }); 

    // Send it. 
    return this.httpClient.post(uploadUrl, formData, options) 
    .toPromise() 
    .catch((e) => { 
     // handle me 
    }); 
} 

角度4ソリューション：

// Note that these imports below are deprecated in Angular 5 
import {Http, RequestOptions} from '@angular/http'; 

uploadFileToUrl(files, restObj, uploadUrl): Promise<any> { 
    // Note that setting a content-type header 
    // for mutlipart forms breaks some built in 
    // request parsers like multer in express. 
    const options = new RequestOptions(); 
    const formData = new FormData(); 

    // Append files to the virtual form. 
    for (const file of files) { 
    formData.append(file.name, file) 
    } 

    // Optional, append other kev:val rest data to the form. 
    Object.keys(restObj).forEach(key => { 
    formData.append(key, restObj[key]); 
    }); 

    // Send it. 
    return this.http.post(uploadUrl, formData, options) 
    .toPromise() 
    .catch((e) => { 
     // handle me 
    }); 
}