使用 angular 参数上传文件 [英] File upload with params in angular

问题描述

我想发送文件上传，我在前端使用 angular，在后端使用 spring boot.我有参数要发送到请求和正文中的字节数组.但是当我发送这个时，我得到了错误400.

i want to send make a file upload, i am using angular in the front and spring boot in the backend.I have parameters to send in the request and the byte array in the body.but when i send this i got error 400.

这是我的后台

@PostMapping(path=Urls.UPLOAD_FILE_IN_LIBELLE_GDA, produces = { MediaType.APPLICATION_JSON_VALUE})
    public void uploadFileInLibelleGda(
            @RequestParam String processus,
            @RequestParam String level0Name,
            @RequestParam String nomFichier,
            @RequestParam String nomLibelle,
            @RequestParam String anneeFolderName,
            @RequestParam String semaineFolderName,
            @RequestBody ByteArrayResource fichier) throws Exception {

        uploadService.uploadFileInLibelleGda(racine, processus,level0Name,nomLibelle, anneeFolderName, semaineFolderName, nomFichier,  fichier.getByteArray());
    }

这是我的前端

  public uploadFiles(
        nomFichier: string,
        nomLibelle: string,
        processus: string,
        level0Name: string,
        semaineFolderName: string,
        anneeFolderName: string,
        byte: Blob
    ): Observable<any> {

        let params = new HttpParams();

        params.append('level0Name', level0Name);
        params.append('processus', processus);
        params.append('nomLibelle', nomLibelle);
        params.append('anneeFolderName', anneeFolderName);
        params.append('semaineFolderName', semaineFolderName);
        params.append('nomFichier', nomFichier);


        return this.httpClient.post(this.urlUploadFile, byte, {

            'params': params
        });
    }

推荐答案

对于 MultiPart FileUpload spring 已经提供了 RequestPart 使用那个.

For MultiPart FileUpload spring already provides RequestPart use that.

@RequestParam 依赖于通过注册的 Converter 或 PropertyEditor 进行类型转换，而 RequestPart 依赖于 HttpMessageConverters，并考虑到请求部分的Content-Type"标头.RequestParam 很可能与名称-值表单字段一起使用.

@RequestParam relies on type conversion via a registered Converter or PropertyEditor while RequestPart relies on HttpMessageConverters taking into consideration the 'Content-Type' header of the request part. RequestParam is likely to be used with name-value form fields.

https://docs.spring.io/spring/docs/current/javadoc- api/org/springframework/web/bind/annotation/RequestPart.html

在 Spring Rest Service 中使用 @RequestPart (value="uploadFile") MultipartFile fichier

Use that @RequestPart (value="uploadFile") MultipartFile fichier in Spring Rest Service

 let formData:FormData = new FormData();
    formData.append('uploadFile', file, file.name);
    let headers = new HttpHeaders();
    /** In Angular 5, including the header Content-Type can invalidate your request */
    headers.append('Content-Type', 'multipart/form-data');
    headers.append('Accept', 'application/json');

    let params = new HttpParams();

params.append('level0Name', '1');
params.append('processus', '1');
params.append('nomLibelle', '1');
params.append('anneeFolderName', '1');
params.append('semaineFolderName', '1');
params.append('nomFichier', '1');

    this.httpClient.post(this.resourcePrefix+'/user/upload', formData,  { headers: headers, params: params})

        .subscribe(
            data => console.log('success'),
            error => console.log(error)
        )
}

这篇关于使用 angular 参数上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！