java - 角度上传图像并将其保存在spring-backend中
问题描述
我是 Angular/Spring 的新手,必须存储(H2-Database)图像(jpeg/png),我不太确定我应该如何做到这一点。我在模板中得到我的文件:
<input #img type = "file" accept="image/jpeg,image/png" (change)="onFileSelected($event)">
我的组件类如下所示:
private userDto: User = {
id: 0,
name: null,
img: null
}
save(name:string){
this.userDto.name = name;
this.userService.saveUser(this.userDto).subscribe(
newUser => this.createdUser = newUser)
}
onFileSelected(event){
this.user.img = event.target.files[0];
}
我的服务(简化):
saveUser(user: User): Observable<User>{
return this.http.post<User>(this.userURI, user);
}
我在 Spring 中使用 @PostMapping/@RequestBody 捕获了该帖子。我现在的问题是:我必须在 Angular 和 Spring [java] 中发送和使用哪种类型,我可以将图像存储在后端并在返回时显示我刚刚存储的图像。(或者我做错了什么?)对于可能转储的问题,我很抱歉,但我以前从未使用过 Angular 或 Spring。提前致谢
解决方案
uploadFile( file: File , id : number ) : Observable<any>
{
let url = this.baseUrl + "uploadImage/" + id ;
const formdata: FormData = new FormData();
formdata.append('file', file);
return this.http.post(url , formdata);
}
在 event.target.files.item(0) 中检索 File 类型的文件参数
检查此以获取更多详细信息:https ://www.javatpoint.com/angular-spring-file-upload-example
推荐阅读
- javascript - 在 Redux 中,reducer 无法识别动作对象
- angular - Angular 类型脚本路由器配置不起作用。总是重定向到主页
- javascript - Rails Ajax Jquery
- javascript - 具有多个类的 JavaScript 手风琴脚本
- php - 查找 2 个用户之间的对话线程,不包括群组对话
- javascript - 如何避免在指令中调用 `$parent` 范围
- c - 在 C 中的 GTK+ TreeView 中使用 Pango 标记
- matlab - 求解方程 {exponential *prod Exponential(ln)}
- android - Android 使用蓝牙检测智能手机
- javascript - Squish - 录制时不进行验证