Bootstrap

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

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>
                    
;