自己封装的文件上传按钮

<template>
  <div class="com-upload">
    <div class="text">上传</div>
    <input
      id="id"
      type="file"
      multiple="multiple"
      accept="accept"
      @change="handleChange"
    />
  </div>
</template>

<script>
export default {
  name: "",
  methods: {
    handleChange(e) {
      if (!e || !e.target || !e.target.files || !e.target.files.length) return;
      this.$emit("change", e);
      //  选择文件之后有上传失败的情况;每一次选择文件了以后需要清空input
      this.clearInput();
    },
    clearInput() {
      document.getElementById("id").value = null;
    },
  },
};
</script>

<style>
.com-upload {
  position: relative;
  width: 84px;
  height: 32px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0068b7;
  text-align: center;
}
input {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
</style>