在Vue项目中 选择图片并预览

最近开始使用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>

　完毕,这个时候就能看到效果了,上传功能后续会再更新!