Senden multipart/form-data-Dateien mit Winkeln mit $ http

Question

Ich weiß, dass es viele Fragen zu diesem Thema, aber ich kann das nicht an der Arbeit:

Ich mag eine Datei vom Eingang zum einen laden server in multipart/form-data

Ich habe zwei Ansätze ausprobiert. Erstens:

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

Welches ergibt z.B. für ein Bild

Content-Type:image/png 

während es sollte multipart/sein form-data

und der andere:

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

Aber das fragt nach einem boundry Header, die ich glaube, sollte nicht manuell eingefügt werden ...

Was ist ein sauberer Weg, um dieses Problem zu lösen? Ich habe gelesen, dass Sie

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

tun können, aber ich will nicht alle meine Beiträge multipart/form-data sein. Die Standardeinstellung sollte JSON sein

Answer 1

Werfen Sie einen Blick auf die Formdata-Objekt: 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

Hier ist eine aktualisierte Antwort für Angular 4 & 5. TransformRequest und angular.identity abgeworfen wurden. Ich habe auch die Möglichkeit, Dateien mit JSON-Daten in einer Anfrage zu kombinieren.

Angular 5 Lösung:

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 
    }); 
} 

Angular 4 Lösung:

// 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 
    }); 
}