图片预览 话不多说 上源码

<template>
  <div id="app">
    <div>
      <div>
        <input type="file" id="file" @click="ddd" placeholder="上传图片" />
      </div>
      <div>
        <div>图片预览</div>
        <img src="" alt="" id="PicPreview" />
      </div>
    </div>
    <script type="text/javaScript"></script>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {},
  methods: {
    ddd() {
      var file = document.getElementById("file");
      var image = document.getElementById("PicPreview");
      file.onchange = function () {
        var fileData = this.files[0];
        var pettern = /^image/;
        if (!pettern.test(fileData.type)) {
          alert("图片格式不正确");
          return;
        }
        var reader = new FileReader();
        reader.readAsDataURL(fileData);
        reader.onload = function (e) {
        image.setAttribute("src", this.result);
        };
      };
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#PicPreview {
  width: 200px;
  height: 200px;
}
</style>

img中的预览图片的大小自行修改，或根据原图片大小，等比例缩放。