<template>
  <div class="fileBoxInput">
    <input
      ref="fileInputer"
      :accept="accept"
      :multiple="false"
      class="fileUp"
      type="file"
      name="file"
      @change="handleChange($event)"
    />
  </div>
</template>

<script>
//Uploadcondition 用于判断个性化文件 //返回 false 就不会上传文件
//UploadErrorEvent 上传成功
//UploadErrorEvent 上传失败

export default {
  name: "fileUpload",
  props: {
    //@reject 默认值
    accept: String, //上传文件类型
    uploadcondition: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {};
  },
  methods: {
    handleChange() {
      let that = this;
      let inputDOM1 = this.$refs.fileInputer;
      const files = inputDOM1.files;
      if (files.length === 0) return;
      if (!this.uploadcondition(files[0])) {
        that.$refs.fileInputer.value = "";
        return false;
      }
      const file = files[0];
      that.$refs.fileInputer.value = "";
      that.$emit("UploadSuccessEvent", {
        file: file,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.fileBoxInput {
  display: block;
  .fileUp {
    display: block;
    opacity: 0;
    width: 100%;
    height: 100%;
    outline: none;
    &:hover{
      cursor: pointer;
    }
  }
}
</style>
