话不多说,直接写
一、html页面
二、html代码:
<div class="descright">
<div class="clinic-img">
<img src="{{imgUrl.value}}" alt="">
<a class="file">上传图片
<input type="file" name="clinicImg" id="" #imgUrl (change)="getImgUrl(imgUrl)">
</a>
</div>
</div>
解释下html代码:
(1)#imgUrl是angular2模板的局部变量,在img标签可直接引用,就像这样{{imgUrl}},
但这个值console出来的是整个input标签
![1123464-20170707105830769-118664456.png](https://i-blog.csdnimg.cn/blog_migrate/a031fffce7cbc018d4394c334d8fe967.png)
但我们只要input标签的输入值,所以就直接{{imgUrl.value}},这样就得到了上传那张图片的路径了,
(2)由于要实时监测input标签的值的变化,所以就用表单的(change)事件属性绑定一个自定义的方法getImgUrl(imgUlr),
方法的具体实现内容看ts文件
三、ts文件的部分代码:
public imgUrl:string;
getImgUrl(imgUrl){
//我们就可以把获取的imgUrl.value经过处理保存到数据库,实现图片上传
console.log(imgUrl.value);
}
四、上传结果
![1123464-20170707110742675-325111986.png](https://i-blog.csdnimg.cn/blog_migrate/2e0968e6c29bbaa6cca5ed54b9db45ec.png)
图片并不能预览,网上查了很久,说是angular一些安全的问题,这个后期再好好查下相关的文档,不过以上图片上传思路基本就是这样了。