web-dev-qa-db-fra.com

Téléchargement de FormData dans l'application angular4

Dans mon application angular4, j'essaie de télécharger la vidéo sur le serveur. Mais peu importe ce que j'ajoute au type de contenu, cela entraîne toujours une erreur du serveur. Dans angular 1 la même api est frappée en utilisant {'Content-Type': undefined}

j'ai essayé la même chose en angular mais ça marche bien. Les données et tout sont corrects. 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

headers.append ('Content-Type', non défini);

ci-dessous est la méthode de demande 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 guider! Merci

angularmultipartform-data
6
Shruti Nair

Donc, après avoir traversé beaucoup de solutions, je suis tombé sur cela problème

Il dit de ne pas ajouter le Content-Type à l'en-tête. Donc, de l'en-tête de ma demande, j'ai supprimé

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

Merci!

20
Shruti Nair

Je vais donner une référence avec Angular 6 et Spring Boot.

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; 
        })
    );
}

API Spring Boot:

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

    @RequestMapping(value = "/upload", method = RequestMethod.POST)
    public Response uploadFile(@RequestParam("uploadedFile") MultipartFile uploadedFileRef){
        System.out.println(uploadedFileRef);
    }
}
4
Shahbaaz Khan