vue--上传图片

样式：

先定义变量，且给图片src给个空值

然后写方法：

创建元素input，追加type=file，并且在事件被侦听时上传文件

给上传的图片加判断事件，并且创建读取对象，发起异步请求去读取文件

然后在组件销毁之前移除事件：

 完整代码如下：

<template>
  <div class="alert-box-item">
    <div class="bigImg-div" @click="toGetImg">
      <img class="bigImg" :src="valueUrl" v-if="valueUrl" />
    </div>
  </div>
</template>

<script>
let inputElement = null;
export default {
  data() {
    return {
      valueUrl: "",
    };
  },
  methods: {
    toGetImg() {
      if (inputElement === null) {
        // 生成上传的控件
        inputElement = document.createElement("input");
        inputElement.setAttribute("type", "file");
        inputElement.style.display = "none";

        if (window.addEventListener) {
          inputElement.addEventListener("change", this.uploadFile, false);
        } else {
          inputElement.addEventListener("change", this.uploadFile);
        }
        document.body.appendChild(inputElement);
      }
      inputElement.click();
    },
    uploadFile(el) {
      console.log(el);
      if (el && el.target && el.target.files && el.target.files.length > 0) {
        const files = el.target.files[0];
        const size = files.size / 1024 / 1024;
        const isLt2M = files.size / 1024 / 1024 < 2;
        // 判断上传文件大小
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        } else if (files.type.indexOf("image") === -1) {
          //如果不是图片格式
          this.$message.error("请选择图片文件");
        } else {
          const its = this;
          const reader = new FileReader(); //创建读取文件对象
          reader.readAsDataURL(el.target.files[0]); //发起异步请求，读取文件
          reader.onload = function () {
            its.valueUrl = this.result;
            console.log(its.valueUrl);
          };
        }
      }
    },
  },
  beforeDestroy() {
    if (inputElement) {
      if (window.addEventListener) {
        inputElement.removeEventLister("change", this.onGetLocalFile, false);
      } else {
        inputElement.detachEvent("change", this.onGetLocalFile);
      }
      document.body.removeChild(inputElement);
      inputElement = null;
    }
  },
};
</script>

<style>
.alert-box-item {
  overflow: hidden;
}

.bigImg-div {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  overflow: hidden;
  border: 1px solid #ddd;
  cursor: pointer;
}

.bigImg {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 100%;
}
</style>

效果如下：