FormData télécharger en angular4 application

Dans mon angular4 application que je suis en train de télécharger la vidéo sur le serveur.
Mais peu importe ce que je ajouter pour le type de contenu il en résulte toujours une erreur du serveur.
Dans angulaire 1 de la même api est frappé à l'aide de {"Content-Type": undefined }

j'ai essayé la même angulaire, mais il force de travail.
Les données et tout est correct.
J'ai essayé avec le type de contenu défini comme ci-dessous

headers.append('Content-Type', 'multipart/form-data');
headers.append('Authorization', token);
headers.set('Accept', 'application/json');

et aussi comme ci-dessous

en-têtes.append('Content-Type', indéfini);

ci-dessous est la méthode de requête http:

public uploadVideo(formData: any) {


        var Upload = this.baseUrl + this.ngAuth.getApiUrl('Upload');
        var authData = JSON.parse(this.localStorage.localStorageGet('token'));
        var token = 'Bearer ' + authData.token;
        var self = this;

        var headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Authorization', token);
        headers.set('Accept', 'application/json');

        return this.http.post(Upload , formData, { headers: headers, method: 'POST' })
            .map((res: Response) => res.json());

    }

Veuillez vous guide!
Grâce

InformationsquelleAutor Shruti Nair | 2017-10-24
  1. 18

    Donc, après être passé par beaucoup de solution, je suis tombé sur ce question

    Il dit ne pas ajouter le Type de Contenu de l'en-tête.
    Donc, de mon en-tête de requête, je l'ai enlevé

    headers.append('Content-Type', 'multipart/form-data');

    Merci!

    • Merci pour cette. Pour les autres je peux ajouter que si vous avez déjà le Content-Type en-tête fixée par Angulaire (mon problème), vous pouvez le faire headers: myHeaders.delete('Content-Type')
    InformationsquelleAutor Shruti Nair
  2. 3

    Je vais vous donner une référence Angulaire 6 et le Printemps de Démarrage.

    Angulaire 6 :

    onSubmit(){
const formdata: FormData = new FormData();
console.log(this.currentFileUpload)
formdata.append('uploadedFile', this.currentFileUpload);
formdata.append('description',"My Desc");
formdata.append('companyName',"ABC")
formdata.append('numberOfRecords',"2")
console.log(formdata.get('uploadedFile'))

this.asyncService.makeUploadRequest('file/upload',formdata).subscribe(response => {
  console.log(response)
  if(response.responseCode == '00'){
    console.log('Successfully uploaded')
  }
  else {
    console.log("error")
  }
 });
}


makeUploadRequest(method, body) : Observable<any> {
    const url = "http://localhost:8097" + "/" + method;

    const headers = new Headers();
    this.token="Bearer"+" "+localStorage.getItem('token'); 
    headers.append('Authorization', this.token);
    //No need to set 'content type'
    const options = new RequestOptions({headers: headers});
    return this.http.post(url, body, options).pipe(
        map((response : Response) => {
            var json = response.json();                
         return json; 
        })
    );
}

    Printemps de Démarrage de l'API :

    @RestController
@RequestMapping(value = { "/file" })
public class FileController {

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public Response uploadFile(@RequestParam("uploadedFile") MultipartFile uploadedFileRef){
        System.out.println(uploadedFileRef);
    }
}
    • Ce Type de Contenu est Angulaire 6 pour vous? Dans mon cas, c'est l'application/json et je ne pense pas que c'est vrai...
    • Le type de contenu dans mon cas, c'est multipart/form-data lorsqu'il n'est pas spécifié dans l'en-tête Content-Type: multipart/form-data; boundary=----WebKitFormBoundarytKcUBulaQJNwYb6p
    InformationsquelleAutor Shahbaaz Khan