Java 文件上传与参数在角度

我想发送一个文件上传，我在前端使用angular，在后端使用spring boot。我在请求中有参数要发送，在正文中有字节数组。但是当我发送这个时，我得到了错误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
        });
    }

公共上传文件(
名字：字符串，
nomLibelle:字符串，
进程：字符串，
level0Name:字符串，
semaineFolderName:string，
anneeFolderName:string，
字节：Blob
)：可见{
设params=newhttpparams（）；
参数append（'level0Name'，level0Name）；
参数append（'processus'，processus）；
参数append（'nomLibelle'，nomLibelle）；
参数append（'anneeFolderName'，anneeFolderName）；
append（'semaineFolderName'，semaineFolderName'）；
参数append（'nomFichier'，nomFichier）；
返回此.httpClient.post（此.urlUploadFile，字节{
“params”：params
});
}

尝试下面的代码

角度服务

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

        // headers
        let headers = new HttpHeaders();
        headers.append('Content-Type', 'multipart/form-data');
        let httpRequestHeaders = new HttpRequest({ headers: headers });

        // body data
        let params = new FormData(); 
        params.append('level0Name', level0Name);
        params.append('processus', processus);
        params.append('nomLibelle', nomLibelle);
        params.append('anneeFolderName', anneeFolderName);
        params.append('semaineFolderName', semaineFolderName);
        params.append('nomFichier', nomFichier);
        params.append('fichier', bytes);

        return this.httpClient.post(this.urlUploadFile, params, httpRequestHeaders);
    }

---

对于多部分文件上传，spring已经提供了RequestPart使用它

@RequestParam依赖于通过注册转换器或PropertyEditor进行的类型转换，而RequestPart依赖于HttpMessageConverters，同时考虑到请求部件的“Content type”头。RequestParam可能与名称值表单字段一起使用

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

在SpringREST服务中使用@RequestPart（value=“uploadFile”）多部分文件fichier

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

---

您需要使用FormData而不是HttpParamsSee我的更新答案，使用

MultipartFile

而不是

ByteArrayResource

作为“fichiers”属性。我这样做了，但当我将其作为param传递但不作为requstbodyYeah时，它不起作用。请尝试此

@RequestParam（“fichier”）MultipartFile fichier

是的，一旦您从angular将文件作为表单数据传递到请求体，它就会被映射，请参阅我的angular代码。我已将表单数据obj

params

传递给请求主体。

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