在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>
  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>