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>