angular2上传图片

话不多说，直接写

一、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标签

 

但我们只要input标签的输入值，所以就直接{{imgUrl.value}},这样就得到了上传那张图片的路径了，

(2)由于要实时监测input标签的值的变化，所以就用表单的(change)事件属性绑定一个自定义的方法getImgUrl(imgUlr),

    方法的具体实现内容看ts文件

三、ts文件的部分代码：

public imgUrl:string;

getImgUrl(imgUrl){

   //我们就可以把获取的imgUrl.value经过处理保存到数据库，实现图片上传

   console.log(imgUrl.value);

}

四、上传结果

图片并不能预览，网上查了很久，说是angular一些安全的问题，这个后期再好好查下相关的文档，不过以上图片上传思路基本就是这样了。