Envoyer multipart / form-fichiers de données avec angular en utilisant $ http

Question

Envoyer multipart / form-fichiers de données avec angular en utilisant $ http

je sais qu'il ya beaucoup de questions à ce sujet, mais je ne peux pas obtenir que cela fonctionne:

je veux télécharger un fichier d'entrée vers un serveur en multipart / form-data

j'ai essayé deux approches. La première:

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

ce qui donne par exemple pour une image

Content-Type:image/png

alors qu'il devrait être multipart/form-data

et l'autre:

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

mais ceci demande un en-tête boundry, qui je crois ne devrait pas être manuellement insérer...

Quelle est la meilleure façon de résoudre ce problème? J'ai lu que vous pouvez faire

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

mais je ne veux pas que tous mes messages soient multipart/form-data. La valeur par défaut doit être JSON

23

angularjs file-upload http http-headers multipartform-data

demandé sur Thomas Stubbe 2016-03-01 14:48:25

3 réponses

score 49 · Answer 1

regardez L'objet 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(){
        });
    }

score 11 · Answer 2

Voici une réponse mise à jour pour Angular 4 & 5. TransformRequest et angulaire.l'identité ont été abandonnées. J'ai également inclus la possibilité de combiner des fichiers avec des données JSON dans une requête.

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

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

score 1 · Answer 3

dans L'angle 6, Vous pouvez faire ceci:

Dans votre fichier de service:

 function_name(data) {
    const url = `the_URL`;
    let input = new FormData();
    input.append('url', data);   // "url" as the key and "data" as value
    return this.http.post(url, input).pipe(map((resp: any) => resp));
  }

Dans le composant.fichier ts: dans n'importe quelle fonction dire xyz,

xyz(){
this.Your_service_alias.function_name(data).subscribe(d => {   // "data" can be your file or image in base64 or other encoding
      console.log(d);
    });
}

Las etiquetas más populares

Envoyer multipart / form-fichiers de données avec angular en utilisant $ http

3 réponses