element-UI 檔案上傳 元件化

這裡是封裝的上傳按鈕元件

DOM寫法

<template>
  <el-upload
    action="#"
    :http-request="requestUpload"
    :show-file-list="showFileList"
    v-loading="loading"
  >
    <el-button
      :type="buttonType"
      icon="el-icon-upload2"
      :disabled="param.reportNo == null"
    >
      <!-- v-hasPermi="['roles']" -->
      {{ name }}
    </el-button>
  </el-upload>
</template>
           

<script>
import { 上傳位址 } from "@上傳檔案位址";
export default {
  name: "JcUpload",
  props: {
    param: {
      type: Object, // report_info 對象
    },
    showFileList: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "上傳",
    },
    roles: {
      type: String,
    },
    buttonType: {
      type: String,
      default: "primary", //  primary 主要按鈕(預設), success 成功按鈕, info 資訊按鈕, warning 警告按鈕, danger 危險按鈕 text 文本按鈕
    },
    loadList: {
      type: Function,
      default: null,
    },
  },
  data() {
    return { loading: false, fileList: [] };
  },
  methods: {
    // 覆寫預設的上傳行為
    requestUpload(file) {
      this.loading = true;
      let data = file.file;
      var filemaxsize = 1024 * 1024 * 4; //4M
      var extend = data.name.substring(data.name.lastIndexOf(".") + 1);
      const copyFile = new File([data], `${this.param.reportNo}.${extend}`);
      data = copyFile;
      if (this.fileList.length > 0) {
        this.loading = false;
        this.fileList = [];
        return;
      }
      if (extend != "doc" && extend != "docx") {
        this.$message({
          message: "請上傳doc文檔或者docx文檔",
          type: "warning",
        });
        this.loading = false;
        this.fileList = [];
        return;
      }
      if (data.size > filemaxsize) {
        this.$message({
          message: "隻能上傳一個4M文檔",
          type: "warning",
        });
        this.loading = false;
        this.fileList = [];
        return;
      }
      let formData = new FormData();

      formData.append("file", data);
      formData.append("reportNo", this.param.reportNo);
       
        reportInfoUpload(formData).then((res) => {
          if (res.code == 200) {
            this.msgSuccess("上傳成功");
            if (this.loadList) {
              this.loadList();
            }
            this.loading = false;
            this.fileList = [];
          } else {
            this.fileList = [];
            this.loading = false;
          }
        });
 
    },
    // 上傳預處理
    beforeUpload(file, fileList) {
      let fileList2 = this.fileList;
      var extend = file.name.substring(file.name.lastIndexOf(".") + 1);
      const k = extend == "doc";
      if (!k) {
        this.$message({
          message: "請上傳word文檔",
          type: "warning",
        });
        this.fileList = [];
        return;
      }
      if (this.fileList.length > 0) {
        this.$message({
          message: "隻能上傳一個Word文檔，請先删除再上傳",
          type: "warning",
        });
        this.fileList = [];
        return;
      }

      return k;
    },
    handlePreview(file) {},
    handleRemove(file, fileList) {
      this.fileList = [];
      this.param.reportUrl = null;
    },
    handleExceed(files, fileList) {},
    beforeRemove(file, fileList) {},
  },
};
</script>