qjkankan_v1.1.1/packages/qjkankan-editor/src/components/shared/UploadFile.vue

<template>
  <input ref="file" type="file" name="file" id style="display: none" />
</template>
<script>
import * as fileInfo from "../../utils/file";

export default {
  props: {
    mediaType: String,
  },
  data() {
    return {
      ext: "",
      name: "",
      type: "",
      size: 0,
    };
  },
  mounted() {
    this.$el.addEventListener("change", (e) => {
      if (!window.FileReader) {
        this.$confirm({ content: this.$t("common.uploads.cant_upload") });
        return;
      }

      if (e.target.files.length === 0) {
        this.ext = "";
        this.name = "";
        this.type = "";
        this.size = 0;
        this.dataURL = "";
        return;
      }

      const file = e.target.files[0];

      if (!fileInfo.checkMediaMime(this.mediaType, file.name)) {
        return this.$confirm({
          content: this.$t("common.uploads.not_support", {
            fileType: fileInfo.mediaTypes[this.mediaType],
          }),
        });
      }

      if (!fileInfo.checkSizeLimit(this.mediaType, file.size)) {
        return this.$confirm({
          content: this.$t("common.uploads.not_support", {
            fileType: fileInfo.mediaMaxSize[this.mediaType],
          }),
        });
      }

      const reader = new FileReader();

      reader.readAsDataURL(file);

      reader.onload = (e) => {
        this.dataURL && window.URL.revokeObjectURL(this.dataURL);
        this.name = file.name;
        this.type = file.type;
        this.mime = fileInfo.getMime(file.name);
        this.size = file.size;
        this.dataURL = fileInfo.base64ToDataURL(e.target.result);
        this.$emit("file-change", this, e);
      };

      e.target.value = "";
    });
  },
  methods: {
    click() {
      this.$el.click();
    },
    upload() {},
  },
};
</script>