Enregistrer FormData avec Upload de Fichier dans Angulaire 5

Je suis en train d'enregistrer des fichiers avec FormData Angulaire 5.
Je peux obtenir le fichier unique, mais n'ont aucune idée de comment récupérer tous les fichiers téléchargés.
J'ai trois fichiers image et les champs de saisie, essayé de chercher des exemples. Mais seulement obtenu pour plusieurs de téléchargement de fichiers.
Je veux télécharger chaque fichier unique à partir de ce formulaire.

Ci-dessous mon code :

JS:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Location } from '@angular/common';
import { ActivatedRoute } from '@angular/router';
import { Category } from '../../../shared/services/categories/category';
import { CategoriesService } from '../../../shared/services/categories/categories.service';

@Component({
  selector: 'app-add-category',
  templateUrl: './add-category.component.html',
  styleUrls: ['./add-category.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AddCategoryComponent implements OnInit {
  
  category: Category = new Category();
  fileToUpload: File = null;
  
  constructor(
    private categoriesService: CategoriesService,
    private route: ActivatedRoute,
    private location: Location  
  ) { }

  ngOnInit() {
  }

  goBack(): void {
    this.location.back();
  }

  handleFileInput(files: FileList) {
    console.log(files);
  }

  addCategory() {
    console.log(this.category);
    this.categoriesService.createCategory(this.category).subscribe(() => this.goBack());
  }

}

HTML:

          <h3 class="box-title">Category</h3>
<form role="form" (ngSubmit)="addCategory()" #categoryForm="ngForm">
<div class="box-body">
<div class="row">
<div class="col-lg-6">
<label for="Category Name">Name</label>
<input type="text" class="form-control" [(ngModel)]="category.category_name" name="category_name" id="category_name" placeholder="Enter Category Name" required="">
</div>
<div class="col-lg-6">
<label for="Category Path">Path</label>
<input type="text" class="form-control" [(ngModel)]="category.category_path" name="category_path" id="category_path" required="">
</div>
</div>
</div>
<br/>
<div class="form-group">
<label for="Category Description">Description</label>
<textarea rows="3" [(ngModel)]="category.category_description" name="category_description" id="category_description" class="form-control" required=""></textarea>
</div>
<div class="col-lg-12 text-center">
<input type="file" [(ngModel)]="category.category_banner" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_banner" id="category_banner">
<label class="custom-file-label" for="customFile">Banner</label>
</div>
<br/>
<div class="form-group">
<label for="Category Banner Code">Banner Code</label>
<textarea rows="3" [(ngModel)]="category.category_banner_code" name="category_banner_code" id="category_banner_code" class="form-control" required=""></textarea>
</div>
<br/>
<div class="col-lg-12">
<input type="file" [(ngModel)]="category.category_image" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_image" id="category_image">
<label class="custom-file-label" for="customFile">Image</label>
</div>
<br/>
<div class="col-lg-12">
<input type="file" [(ngModel)]="category.category_icon" (change)="handleFileInput($event.target.files)" class="custom-file-input" name="category_icon" id="category_icon">
<label class="custom-file-label" for="customFile">Icon</label>
</div>
<div class="form-group">
<label for="Category Meta Title">Meta Title</label>
<input type="text" [(ngModel)]="category.category_meta_title" class="form-control" name="category_meta_title" id="category_meta_title" placeholder="Enter Meta Title" required="">
</div>
<div class="form-group">
<label for="Category Meta Description">Meta Description</label>
<input type="text" [(ngModel)]="category.category_meta_decription" class="form-control" id="category_meta_description" name="category_meta_description" placeholder="Enter Meta Description" required="">
</div>
<div class="form-group">
<label for="Category Meta Keyword">Meta Keyword</label>
<input type="text" [(ngModel)]="category.category_meta_keyword" class="form-control" id="category_meta_keyword" name="category_meta_keyword" placeholder="Enter Meta Keyword" required="">
</div>
<div class="form-group">
<div class="row">
<div class="col">Featured :</div>
<div class="col">
<label class="radio-inline" for="Category Featured">
<input type="radio" [(ngModel)]="category.category_featured" name="category_featured" id="category_featured" value="1" required="">Yes
</label>
</div>
<div class="col">
<label class="radio-inline" for="Category Featured">
<input type="radio" [(ngModel)]="category.category_featured" name="category_featured" id="category_featured" value="0" required="">No
</label>
</div>
</div>
</div>
<input type="hidden" [(ngModel)]="category.category_status" name="category_status" id="category_status" value="1">
<div class="box-footer col-md-12">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

InformationsquelleAutor Kamlesh Katpara | 2018-01-26
  1. 5

    J'ai récemment eu un problème similaire. Cela peut être résolu en définissant le type de contenu de l'en-tête comme nulle dans l'angle de code.
    Fixation de l'extrait de code de Angular5 et le printemps de démarrage principal.

    let headers = new HttpHeaders();
//this is the important step. You need to set content type as null
headers.set('Content-Type', null);
headers.set('Accept', "multipart/form-data");
let params = new HttpParams();
const formData: FormData = new FormData();
for (let i = 0; i < this.filesList.length; i++) {
formData.append('fileArray', this.filesList[i], this.filesList[i].name);
} 
formData.append('param1', this.param1);
formData.append('param2', this.param2);
this.http.post(this.ROOT_URL + this.SERVICE_ENDPOINT, formData, { params, headers }).subscribe((res) => {
console.log(res);
});
In the spring boot backend, you need to have the controller as - 
@RequestMapping(value = "/uploadAndSendEmail", method = RequestMethod.POST, consumes= "multipart/form-data")    
public ResponseEntity<String> uploadAndSendEmail(@RequestParam("fileArray") MultipartFile[] fileArray, 
@RequestParam(value = "param1", required = false) String param1,
@RequestParam(value = "param2", required = false) String param2) {
//do your logic
}
    InformationsquelleAutor chaitanya Rudrabhatla
  2. 3

    C'est ce que j'ai essayé et cela a fonctionné comme prévu :

    JS:

    handleCategoryBanner(files: FileList) {
this.category.category_banner = '/categories/download/' + files[0].name;
this.formData.append('category_banner', files[0], files[0].name);
this.categoryContainersService.uploadFile(this.formData).subscribe(filename => console.log(files[0].name));
}

    HTML:

    <div class="col-lg-12 text-center">
<input type="file" (change)="handleCategoryBanner($event.target.files)" class="custom-file-input" id="category_banner" accept=".jpeg,.png,.jpg">
<input type="hidden" name="category_banner" [(ngModel)]="category.category_banner" />
<label class="custom-file-label" for="customFile">Banner</label>
</div>

    InformationsquelleAutor Kamlesh Katpara
  3. 0

    Voici comment je m'occupe de plusieurs fichiers à partir d'un seul fichier d'entrée.
    Mon volet rassemble les données de formulaire, et produit un objet de Données, qui ne contient pas les fichiers. Puis, il appelle cette méthode de service avec l'objet de Données et des fichiers, qui envoie les données et les fichiers en plusieurs parties post.

      save(data: Data, filesForUpload: File[]): Observable<Data> {
const formData = new FormData();
//add the files
if (filesForUpload && filesForUpload.length) {
filesForUpload.forEach(file => formData.append('files', file));
}
//add the data object
formData.append('data', new Blob([JSON.stringify(data)], {type: 'application/json'}));
return this.http.post<Data>(this.apiUrl, formData);
}

    Donc, pour gérer les deux fichiers d'entrées, vous pourriez faire ceci:

     save(data: Data, filesA: File[], filesB: File[]): Observable<Data> {
const formData = new FormData();
//add the files
if (filesA && filesA.length) {
filesA.forEach(file => formData.append('filesA', file));
}
if (filesB && filesB.length) {
filesB.forEach(file => formData.append('filesB', file));
}
//add the data object
formData.append('data', new Blob([JSON.stringify(data)], {type: 'application/json'}));
return this.http.post<Data>(this.apiUrl, formData);
}

    Qui vous donne trois pièces dans votre multipart post, un pour chaque ensemble de fichiers, et une pour l'objet de données.

    • Je ne suis pas d'essayer de traiter plusieurs fichiers à partir d'un seul fichier d'entrée. Je ne suis pas clair avec le filesA et filesB exemple, j'ai essayé ceci : code' handleFileInput(files: FileList) { this.fileToUpload = files.item(0); }'code j'ai trois de chargement des images des boutons et je veux l'envoyer par la poste avec le formData.
    • Simple-upload de fichier fonctionne de la même comme le multi-upload de fichier, c'est toujours dans un tableau, mais il n'y a qu'un seul élément dans la matrice. Ou, vous pouvez simplement passer à un élément via files.item(0); Dans l'exemple, je suis de passage dans les deux tableaux de fichiers en supposant qu'il y a deux entrées. S'il y avait trois entrées, il avait pass les trois tableaux (ou trois des éléments individuels). La raison que je suis de les envoyer séparément dans le POSTE est de sorte que vous pouvez savoir sur le côté serveur qui provient le fichier d'entrée.
    • essayez cette version: stackblitz.com/edit/angular-o2mgmx
    InformationsquelleAutor GreyBeardedGeek
  4. 0

    vient de mettre attribut 'multiple' sur votre tag
    maintenant en sélectionnant les 2 ou plusieurs fichiers sur la navigation, vous obtiendrez objet doit itérer sur elle pour extraire des images sur elle.
    comme ceci-->

     <div class="form-group">
<label for="file">Choose File</label>
<input type="file" id="file" (change)="handleFileInput($event.target.files)" multiple>
</div>
    • il n'est pas du même champ de saisie pour le télécharger
    InformationsquelleAutor Ehsan Sadeghi