HTML部分

<div class="file">
      <input type="file" class="updata" accept="image/*" @change="change($event)" ref="updata">
      <img :src="imageUrl ? imageUrl : baseImg" alt="" class="img">
    </div>

这里的 img使用了动态绑定src 如果上传了图片就显示上传的图片，如果没有上传图片，就显示默认的图片

js代码

<script>
export default {
   data() {
      return {
        // 上传的图片
        imageUrl: '',


        // 默认的图片
        baseImg: ''
      }
   },
   methods: {
     change(e) {
      console.log(e.target.files[0].name);
      // 判断是不是规定格式
      // let name  =  e.target.files[0].name

      // 获取到第一张图片
      let file = e.target.files[0]

      // 创建文件读取对象
      var reader = new FileReader()
      var that = this 

      //  将文件读取为DataURL
      reader.readAsDataURL(file)

      // 读取成功调用方法
      reader.onload = e => {
        console.log('读取成功');

        // e.target.result 获取 读取成功后的  文件DataURL
        that.imageUrl = e.target.result

        // 如果要将图片上传服务器，就在这里调用后台方法
      }

     }
   },
   created() {
     // 获取默认显示的图片
     this.baseImg = require('./pic/1.jpg')
   },
   mounted() {
    
   }
}
</script>

样式部分

<style>
  .file {
    position: relative;
    width: 200px;
    height: 150px;
    background-color: #ccc;
  }
  .updata {
    display: block;
    height: 100%;
    width: 100%;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    height: 150px;
  }

</style>

最后效果
没有上传图片---- 显示默认的图片

上传图片 ----- 显示上传的图片

前端开发交流群，请添加微信：coderchen_