web-dev-qa-db-fra.com

Angular 2 + TypeScript + téléchargement de fichier

Je crée un projet angular2, dans lequel mon exigence est de télécharger un fichier et d'envoyer certains paramètres du client au serveur (Spring Rest Server). J'ai essayé l'interface Formdata, mais lorsque j'ajoute un fichier (objet de fichier créé à partir de event.srcElement.files), puis que j'enregistre l'objet pour le consoler, il imprime un objet formdata vide. En ce qui concerne le côté serveur, j'utilise @requestparam ("fichier") pour récupérer le fichier. Ce serait formidable si quelqu'un pouvait fournir de l'aide à ce sujet.

c'est le code dans mon fichier html

<input type="file" #uploadFile multiple="true" (change)="uploadFile($event)"/>

le fichier composant est comme ceci

  uploadFile(event:any){
    let file = event.target.files[0];
    let fileName = file.name;
    console.log(file)
    console.log(fileName)
    let formData = new FormData();
    formData.append('file',file);
    this.examService.uploadAnswer(formData);
}

et dans le dossier de service

uploadAnswer(formData:FormData){  
            console.log(formData)
            this.http.post(this.url+'/uploadanswer', formData)
            .map((response: Response) => {
                let res = response.json();
            Object.keys(res).forEach(name =>
                this.questions=res[name]
            );
            });
angulartypescriptfile-upload
8
parikshitcs0072

Votre code HTML doit être:

<input id="file-field" name="file-field" (change)="uploadFile($event)" type="file" accept=".png,.jpg,.jpeg">

Vous obtiendrez donc le fichier dans le composant sous la forme:

uploadFile(event) {
  let files = event.target.files;
  if (files.length > 0) {
    console.log(file); // You will see the file
    this.service.uploadFile(file);
  }
}

Et en service:

uploadFile(file) {
  let formData: FormData = new FormData();
  formData.append('file', file, file.name);

  this.http.post(url, formData, request_options)
}

Ensuite, vous obtiendrez le fichier avec la clé de fichier dans les données de demande.

7
Malik Shahzad