and - angularjs formdata upload file



Invia file multipart/form-data con angolare usando $ http (2)

So che ci sono molte domande su questo, ma non riesco a farlo funzionare:

Voglio caricare un file da input a un server in multipart / form-data

Ho provato due approcci. Primo:

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

Quale risulta ad esempio per un'immagine

Content-Type:image/png

mentre dovrebbe essere multipart / form-data

e l'altro:

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

Ma questo richiede un colpo di testa, che credo non dovrebbe essere inserito manualmente ...

Qual è un modo pulito per risolvere questo problema? Ho letto che puoi fare

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

Ma non voglio che tutti i miei post siano multipart / form-data. L'impostazione predefinita dovrebbe essere JSON

https://src-bin.com


Answer #1

Dai un'occhiata all'oggetto 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

Ecco una risposta aggiornata per Angular 4 e 5. TransformRequest e angular.identity sono state eliminate. Ho anche incluso la possibilità di combinare file con dati JSON in una sola richiesta.

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

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




multipartform-data