离子4上传截图到服务器

Question

我想截取屏幕截图并将其上传到服务器(我使用spring-boot(，为此我使用本机库屏幕截图及其角度服务来获取图像 URI，我将图像 URI 转换为 blob 并使用 HTTPCLIENT 的FORMDATA和 post 请求发送它，问题出在后台，我找不到参数命名文件。拜托，谁能帮我？

注意：我使用MULTIPARTFILE作为参数类型和REQUESTPARAM注释webservice参数类型。

这里是Java代码：

@PostMapping(value = { "/uploadImg/{idColis}" })
public void uploadScreenShot(@RequestParam("file") MultipartFile file, @PathVariable String idColis) {
if (file != null) {
try {
fileService.importerImage(file);
} catch (Exception e) {
e.printStackTrace();
}
}
}

使用的角度代码：

call(colis : any){
this.screenshot.URI(80).then(img => {
this.screenShotsuccess = 'screened';
this.colisService.upload(img,colis).subscribe(res=>{
this.screenShotsuccess = 'screened and uploaded';
});
}, err => {
this.screenShotsuccess = err ;
} );}
upload(imgData : any,colis :any){
// Replace extension according to your media type
const imageName = colis.codeEnvoi+ '.jpg';
// call method that creates a blob from dataUri
const imageBlob = this.dataURItoBlob(imgData.URI);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' })
let  postData = new FormData();
postData.append('file', imageFile);
let data:Observable<any> = this.httpClient.post(this.wsListeUploadImage+colis.codeEnvoi,postData);
return data;}
dataURItoBlob(dataURI) {
console.log(dataURI);
const byteString = window.atob(dataURI.split(',')[1]);
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
int8Array[i] = byteString.charCodeAt(i);
}
const blob = new Blob([int8Array], { type: 'image/jpeg' });    return blob;}

这是我得到的错误：

2019-12-29 08:21:07.276  WARN 5356 --- [nio-8080-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]

Answer 1

在你的 Angular 代码中，你正确地创建了FormData，但你从不使用它：

let data:Observable<any> = this.httpClient.post(this.wsListeUploadImage+colis.codeEnvoi,{'file':imageFile});

将其更改为

let data:Observable<any> = this.httpClient.post(this.wsListeUploadImage+colis.codeEnvoi, postData);