web-dev-qa-db-fra.com

Comment envoyer des données de formulaire dans une requête http post de angular 2?

J'essaie d'envoyer les données de formulaire contenant les détails de l'utilisateur mis à jour au serveur principal, dans le serveur angulaire 2. Cependant, je ne pouvais pas envoyer les données de formulaire et le serveur répond avec le statut 500. Dans angularjs, j'ai déjà procédé de la sorte, fichier de service 

  update: {
    method: 'POST',
    params: {
      dest1: 'update'
    },
    transformRequest: angular.identity,
    'headers': {
      'Content-Type': undefined
    }
  }

Dans le contrôleur en tant que 

var fd = new FormData();
var user = {
  _id: StorageFactory.getUserDetail()._id,
  loc: locDetails
};
fd.append('user', angular.toJson(user));
UserService.update(fd).
$promise.then(
  function(value) {
    console.info(value);
    updateUserDetailsInStorage();
  },
  function(err) {
    console.error(err);
  }
);

Je ne pouvais pas comprendre comment faire cela dans angular 2, car les caractéristiques angular.toJson, angular.identity et transformrequest ne sont pas disponibles dans angular 2, Jusqu'à présent, j'ai fait ce qui suit dans angular 2,

 let fd = new FormData();
 let user = {
   _id: this.appManager.getUserDetail()._id,
   loc: locDetails
 };
 fd.append('user', JSON.stringify(user));
 this.userService.update(fd).subscribe((value) => {
   console.log(value);
   this.updateUserDetailsInStorage();
 }, (err) => {
   console.error(err);
 });

Fichier de service http 

update(body) {
  console.log('update', body);
  const headers = new Headers({
    'Content-Type': undefined
  });

  const options = new RequestOptions({
    headers: headers
  });
  return this.http.post(`${app.DOMAIN}` + 'user/update', body, options)
    .map((res: Response) => {
      res.json();
    }).do(data => {
      console.log('response', data);
    })
}

J'ai lu de nombreux articles et essayé peu de choses, mais jusqu'à présent, cela n'a pas abouti. Quelqu'un pourrait-il me dire comment procéder?

javascriptangularmultipartform-dataform-data
6
akila arasan

Vous pouvez ajouter des en-têtes si votre contrôleur de serveur le requiert, vous pouvez simplement le poster comme ceci

let body = new FormData();
body.append('email', 'emailId');
body.append('password', 'xyz');
this.http.post(url, body);
9
Sahil Daga

C'est une solution fonctionnelle pour construire une demande POST dans Angular2, vous n'avez pas besoin d'un en-tête d'autorisation.

var headers = new Headers();
headers.append('Content-Type', 'application/x-www-form-urlencoded');

let options = new RequestOptions({ headers: headers });

var body = "firstname=" + user.firstname + "&lastname=" + user.lastname + "&username=" + user.username + "&email=" + user.email + "&password=" + user.password;

return new Promise((resolve) => {
                this.http.post("http://XXXXXXXXXXX/users/create", body, options).subscribe((data) => {
                if (data.json()) {
                    resolve(data.json());
                } else {
                    console.log("Error");
                }
            }
        )
    });
5
Joffrey Outtier

Voici la méthode que j'ai utilisée dans angular 4 pour télécharger des fichiers .... pour Ui 

   <input type="file"id="file"(change)="handleFileInput($event)">

et le fichier .ts j'ai ajouté ceci ....

  handleFileInput(event) {
    let eventObj: MSInputMethodContext = <MSInputMethodContext> event;
    let target: HTMLInputElement = <HTMLInputElement> eventObj.target;
    let files: FileList = target.files;
    this.fileToUpload  = files[0];
    console.log(this.fileToUpload);
  }



 uploadFileToActivity() {
    console.log('Uploading file in process...!' + this.fileToUpload );
    this.fontService.upload(this.fileToUpload).subscribe(
      success => {
        console.log(JSON.stringify(this.fileToUpload));
        console.log('Uploading file succefully...!');
        console.log('Uploading file succefully...!' + JSON.stringify(success));
      },
      err => console.log(err),
    );
  }

et dans les services 

upload(fileToUpload: File) {
    const headers = new Headers({'enctype': 'multipart/form-data'});
    // headers.append('Accept', 'application/json');
    const options = new RequestOptions({headers: headers});
    const formData: FormData = new FormData();
    formData.append('file', fileToUpload, fileToUpload.name);
    console.log('before hist the service' + formData);
    return this.http
      .post(`${this.appSettings.baseUrl}/Containers/avatar/upload/`, formData , options).map(
        res => {
          const data = res.json();
          return data;
        }
      ).catch(this.handleError);
  }

Cette méthode est utilisée pour le téléchargement d’un seul fichier dans le répertoire du serveur.

1
muhammad zaman

Voici la méthode de mon application qui fonctionne bien.

 updateProfileInformation(user: User) {
    this.userSettings.firstName = user.firstName;
    this.userSettings.lastName = user.lastName;
    this.userSettings.dob = user.dob;

    var headers = new Headers();
    headers.append('Content-Type', this.constants.jsonContentType);

    var s = localStorage.getItem("accessToken");
    headers.append("Authorization", "Bearer " + s);
    var body = JSON.stringify(this.userSettings);

    return this.http.post(this.constants.userUrl + "UpdateUser", body, { headers: headers })
      .map((response: Response) => {
        var result = response.json();
        return result;
      })
      .catch(this.handleError)
  }
1
John Baird