angular与springboot实现文件的上传以及照片回显_angualr upload图片回显-优快云博客

本文链接：https://blog.youkuaiyun.com/Genjicoo/article/details/98966308

本文介绍了如何使用Angular与SpringBoot实现文件上传及照片回显功能。在Angular端，通过表单提交文件和其它参数，利用FormData进行数据封装。SpringBoot后端接收到数据并存储，同时配置资源处理器实现照片回显。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

angular与springboot实现文件的上传以及照片回显

近期进入公司，开始接触angular，并要求使用angular+springboot做一个小例子，其中涉及到了照片上传这方面的知识，做出来以后记录一下踩过的坑，希望之后再做这类功能的时候不要再犯。

文件上传

从前端开始说起，我先把代码贴上，这是文件上传组件的html界面，angular的构造我就不写了，自己看一下官方文档应该就都能明白。

可以看到ngmodel双向绑定的属性是from?.name,那么这里为什么要加这个？呢

?.是angular模板中的安全属性操作符语法，属于angular模板特有语法
a?.b表示当a存在时(不为null或undefined)，取a.b的值，否则置空；以避免出现a未赋值时直接报错详见官方文档
The safe navigation operator ( ?. ) and null property paths

add.component.html

<div class="container" style="width: 30%;margin-left: 35%">
        <h3 class="text-center">新增页面</h3>
        <br/>
        <form  method="post" (ngSubmit)="onSubmit(regForm.value)" #regForm="ngForm">
                <div class="form-group" >
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" name="name" (ngModel)="from?.name" placeholder="请输入姓名">
                </div>
                <div class="form-group" >
                     <label for="name">性别</label><br/>
                    <input type="radio" class="" name="sex"  (ngModel)="from?.sex" value="男"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="" name="sex"  (ngModel)="from?.sex" value="女"/>女
                </div>
                <div class="form-group" >
                    <label for="name">出生日期</label>