vue中图片及时预览 小demo

<div class="form-in camear-box">

　　<div class="dingwei clearfix" @click="yulan">

　　　　<p>图片</p>

　

　　　　<input type="file" class="camear" ref="camear">

　　　　<div class="Fcamear">

 

　　　　</div>

　　　　<div class="show">

　　　　　　<img src="" alt="" ref="tupian">

　　　　</div>

　　</div>

</div>

 

 

 

methods: {

　　　yulan() {

　　　　var file = this.$refs.camear;

　　　　var img = this.$refs.tupian;

　　　　file.onchange = function() {

　　　　　　var reader = new FileReader();

　　　　　　//reader.readAsText(文件对象); 读取文件里面的内容

　　　　　　reader.readAsDataURL(this.files[0]);

　　　　　　reader.onload = function() {

　　　　　　　　img.src = this.result;

　　　　　　};

　　　　};

　　}

},

如果觉得file选择按钮丑的话,可以把file的opacity 改成0 并浮动  在模拟一个一样大小的样式盒子,放在该file下面

 

 

 

 

 

 

 

 

转载于:https://www.cnblogs.com/eva67/p/9566483.html