zhengzhou_university/web/src/components/uploader.vue

<template>
  <input
    ref="file"
    type="file"
    name="file"
    id
    style="display: none"
    :accept="accept"
  />
</template>
<script>
import * as fileInfo from "@/utils/file";
export default {
  props: {
    limit: Number,
    mediaType: Array,
    acceptType: String,
    failString: String,
    limitFailStr: String,
  },
  computed: {
    accept() {
      if (this.acceptType) {
        return this.acceptType;
      }
      if (!this.mediaType) {
        return '*'
      }

      let tmp = []
      this.mediaType.forEach(item => {
       tmp = tmp.concat(fileInfo.mediaMimes[item]
        .map((ii) => item + "/" + ii))
      });
      return tmp.join(",");
    },
  },
  mounted() {
    this.$el.addEventListener("change", (e) => {
      if (!window.FileReader) {
        this.$showAlert({
            tips:'无法上传'
        })
        e.target.value = "";
        return;
      }

      if (e.target.files.length === 0) {
        e.target.value = "";
        return;
      }

      this.files = e.target.files;

      this.files = Array.from(this.files).filter((item, i) => {


        if (this.mediaType.length > 0 ) {
          let pass = this.mediaType.find(jj=>{
            return fileInfo.checkMediaMime(jj, item.name)
          })

          if (!pass) {
            setTimeout(() => {
            if (this.failString) {
                this.$showAlert({
                    tips:`“${item.name}”` + this.failString
                })
              } else {
                this.$showAlert({
                    tips:"不支持该文件格式"
                })
              }
            }, i * 100);
            return;
          }
        }
        if (this.limit > 0) {
          if (!fileInfo.checkSizeLimitFree(item.size, this.limit)) {
            e.target.value = "";
            setTimeout(() => {
              if (this.limitFailStr) {
                this.$showAlert({
                    tips:`“${item.name}”` + this.limitFailStr
                })
              }
              else{
                this.$showAlert({
                    tips:`文件大小不能超过${this.limit}MB`
                })
              }
            }, i * 100);
            return;
          }
        } else if (!fileInfo.checkSizeLimit(this.mediaType, item.size)) {
          setTimeout(() => {
            if (this.limitFailStr) {
              this.$showAlert({
                    tips:`“${item.name}”` + this.limitFailStr
                })
            }
            else{
              this.$showAlert({
                    tips:`上传文件太大，不能超过${fileInfo.mediaMaxSize[this.mediaType]}MB`
                })
            }
            
          }, i * 100);
          return;
        }
        return item
      });

      this.$emit("file-change", this);
      e.target.value = "";
    });
  },
  beforeDestroy() {
    // this.clear();
  },
  methods: {
    click() {
      this.$el.click();
    },
    clear() {
      this.dataURL && window.URL.revokeObjectURL(this.dataURL);
      this.name = null;
      this.type = null;
      this.size = null;
      this.files = null;
      this.dataURL = null;
      this.base64 = null;
      this.poster = null;
    },
    upload() {},
  },
};
</script>