综合编程

Angular 9 File upload + Spring Boot REST API

微信扫一扫,分享到朋友圈

Angular 9 File upload + Spring Boot REST API

In Angular Component

Construct the formData with all the required fields including your file and the different inputs you need to pass along with your file.

constructFormData(){
let formData = new FormData();
formData.append('couponCode', this.couponCode);
formData.append('file',this.networkFileUploaded);
// add more inputs as you need
this.submitRequest(formData);
}

on file upload assigning the uploaded to files to networkFile variable, the same only sent to the backend in the formData

onFileUpload(event: any) {
const target: DataTransfer = (evt.target) as DataTransfer;
if (target.files[0]) {
this.filename = target.files[0].name;
this.networkFile = target.files[0];
this.constructFormData();
}
}
submitRequest(formData:FormData){	this.couponService.submitFileAndData(formData).subscribe((success)=>{
console.log("response received is "+success);
}, (error)=>{
console.log("Exception while hitting the file upload service "+error);
});
}

In Angular Service

submitFileAndData(formData:FormData) {
let url = "http://localhost/coupons/upload";
return this.httpClient.post<any>(url, formData);
}

In Spring Boot Rest API Controller

@RequestMapping(path="/upload", method=RequestMethod.POST, consumes = {"multipart/form-data"})
public boolean uploadFile(@RequestParam("file") MultipartFile file, @RequestParam("couponCode") String couponCd){
try{
System.out.println("uploaded file is "+file);
System.out.println("passed coupon code is "+couponCd);
}catch(Exception e){
logger.error("Exception while upload "+e.getMessage());
}
}

16 total views,  16 views today

NVIDIA被曝8月底发布安培显卡:RTX 3080 Ti性…

上一篇

[图]美国环保署宣布放宽疫情期间的执行力度

下一篇

你也可能喜欢

评论已经被关闭。

插入图片
NgDeveloper 投稿者
我还没有学会写个人说明!
最近文章
  • 1 SEO Word Count in Java 8
  • 2 Java 13 New features
  • 热门栏目

    Angular 9 File upload + Spring Boot REST API

    长按储存图像,分享给朋友