点击div上传图片，在img中预览

template部分

<div v-if="!form.imgVal" class="ad-img-wrap" @click="changeImageHandler">
  <span class="iconfont iconjiahao"></span>
</div>
<img v-else class="ad-img-wrap" :src="form.imgVal" alt="" accept="image/*">
<input type="file" @change="changeImgHandler($event)" ref="adImg" style="display: none;"  accept="image/*">

script部分

data(){
  return{
    form:{
      imgVal: null
    }
  }
}
methods:{
  changeImageHandler () {
      this.$refs.adImg.dispatchEvent(new MouseEvent('click'))
  },
  changeImgHandler (e) {
      let fileName = this.$refs.adImg.value
      let list = fileName.split('.')
      let type = list[list.length - 1]
      let flag = false
      for (let i = 0; i < imgFormat.length; i++) {
        if (imgFormat[i] === type) flag = true
      }
      if (!flag) {
        this.$message({
          message: '请选择图片',
          type: 'warning'
        })
        return false
      }
      this.form.imgVal = this.getImg(e.target.files[0]) // 图片地址
    },
    getImg (file) {
      let url = ''
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    }
}

 

来源：https://www.cnblogs.com/haishen/p/11649286.html