最近开始使用vue做项目
在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览
花了点时间解决,因此分享一下预览功能的解决方案
页面:
<div class="select"> <input type="file" id="filed" hidden="" @change="filePreview"> //@change是vue中的用法,相当于原生的onchange <p @click="selectImg()"> //selectImg方法是点击触发input的点击 <span v-if="textHide">点击上传头像</span> //textHide控制当图片显示时,该span标签隐藏 <img :src="src" /> //src定义了img的路径 </p> </div>
script:
<script> export default { data() { return { src:'', textHide:true, } }, methods: { selectImg:function(){ document.getElementById('filed').click() }, filePreview(e){ let _this = this var files = e.target.files[0] if (!e || !window.FileReader) return // 判断是否支持FileReader let reader = new FileReader() reader.readAsDataURL(files) // 文件转换 reader.onloadend = function () { _this.src = this.result _this.textHide=false; } } }, created: function () { } } </script>
完毕,这个时候就能看到效果了,上传功能后续会再更新!