web-dev-qa-db-fra.com

angular 4- Comment envoyer un fichier dans POST au backend

J'ai un téléchargement de fichier dans le formulaire. J'ai besoin de créer une demande de publication pour le backend avec ce fichier téléchargé et certains autres champs de formulaire.

Voici mon code:

      fileChange(event) {

        const fileList: FileList = event.target.files;
        if (fileList.length > 0) {
          this.file = fileList[0];
          this.form.get('file_upload').setValue(this.file);
        }
      }


      onClick(){

        const val = this.form.value;

             const testData = {
              'file_upload': this.file,
              'id': val.id,
              'name' : val.name,
              'code': val.code,
          };

        this.http.post('https://url', testData,
          .subscribe(
            response => {
              console.log(response);
            });
        }

Chaque valeur de champ est envoyée au backend à l'exception du fichier téléchargé. Comment envoyer un fichier téléchargé avec des champs de formulaire au backend? Faites-moi savoir si des informations supplémentaires sont nécessaires.

angularfile-uploadangular4-forms
4
yer

Vous essayez simplement de passer des données de fichier simples

'file_upload': this.file,

c'est faux

Il y a beaucoup de façons de télécharger un fichier, j'aime utiliser FormData, par exemple dans votre cas:

let testData:FormData = new FormData();
testData.append('file_upload', this.file, this.file.name);
this.http.post('https://url', testData).subscribe(response => {
    console.log(response);
});

Plus de détails ici Téléchargement de fichier en angulaire?

6
dark_gf

En supposant que vous gérez correctement le téléchargement du fichier sur le serveur (généralement un type de package npm comme multer ou busboy),

vous devez utiliser un package npm du côté angular pour gérer les données du formulaire en plusieurs parties.

ng-2-file-upload est l'un des nombreux qui fonctionnent.

https://www.npmjs.com/package/ng2-file-upload

0
borbesaur