图片上传预览精简版

1.dom

<a href="javascript:;" class="a-upload" title="上传">
    <input type="file" v-on:change="uploadPicture($event,index)" accept="image/*" id="file" />上传
</a>

1.js

获取上传图片,url

<--input change事件-->
uploadPicture:function(event,index){
    var obj = {};
    var imgUrl = event.target.value
    var ext = imgUrl.substring(imgUrl.lastIndexOf(".")+1).toLowerCase();
    if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
         alert("图片的格式必须为png或者jpg或者jpeg格式！");
         return;
     }
    var reader = new FileReader();
    var self = this;
    setTimeout(function(){
          reader.readAsDataURL(event.target.files[0]);
          reader.onload = function(e){
          obj.url = this.result;
          //为了实现改变刷新页面,将图片obj.url赋值给需要预览的![](obj.url),实现预览功能
          this.imgs = obj.url;
          event.target.value = null;
          //把数据存储到本地
          // localStorage.setItem(self.photoName,JSON.stringify(self.imgs))
       }
     },800)
},