文件上传xslx

html部分

 <div class="announcements12" style="display: flex">

      <el-input v-model="url"></el-input>

      <el-upload

        ref="upload"

        :action="uploadUrl"

        :on-preview="handlePreview"

        :on-remove="handleRemove"

        :on-change="handleFileUpload"

        :file-list="fileList"

        :auto-upload="false"

        :headers="headers"

      >

      <!--action  上传的地址

      on-preview  点击文件列表中已上传的文件时

      on-remove   文件列表移除文件时

      on-change   文件状态改变时

      file-list   上传的文件列表【array】

      auto-upload 是否在选取文件后立即进行上传

      headers     设置上传的请求头部【Object】  -->

        <div slot="tip" class="el-upload__tip">只能上传xlsx文件格式</div>

        <el-button slot="trigger" size="small" type="primary" class="btnBorder"

          >选取文件</el-button

        >

      </el-upload>

    </div>

    <div slot="footer">

      <el-button @click="onClose" class="btnBorder">取消</el-button>

      <el-button type="primary" @click="submitUpload" class="btnBorder"

        >确定</el-button

      >

    </div>

script部分

import {
  importLawDocument,
  downloadTemplate,
} from "@/api/lawDatabase.js";
import { debounce } from "lodash";
<script>
export default {
  data() {
    return {
      file: null,
      list: [],
      headers: {
        "Content-Type": "multipart/form-data",
      },
      uploadUrl: "",
      url: "",
      formData: null,
      // up
      fileList: [],
      excelData: {
        header: null,
        results: null,
      },
      code: "regulations_template",
      templateUrl: "",
    };
  },
};
 methods: {
// 文件改变时
    handleFileUpload(event) {
      this.file = event.raw;
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (e) => {
          resolve();
        };
        reader.readAsArrayBuffer(this.file);
        this.uploadUrl =
          window.location.protocol +
          "//" +
          window.location.host +
          "/law/lawRegulationsLibrary/upload";
        this.url = document.getElementsByClassName("el-upload__input")[0].value;
      });
    },
submitUpload: debounce(async function () {
      if (this.file) {
        if (
          this.file.type !=
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        )
          return this.$message.error("文件只能是 上传xlsx 格式!");

        let formData = new FormData();
        if (formData.document == undefined) {
        }
        if (
          this.file.type ==
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        ) {
          formData.append("document", this.file);
          formData.append("regulationsId", this.uploadId.id);

          const { code } = await importLawDocument(formData);
          if (code === 200) {
            this.$message.success('上传成功');
            this.url = this.$options.data().url;
            this.onClose();
            this.file = null;
            
          }
        }
      }
    }, 500), // 设置防抖延迟时间（单位：毫秒），这里设置为500毫秒
    //删除的钩子
    handleRemove(file, fileList) {
    },
    //已上传的
    handlePreview(file) {
    },
    onClose() {
      this.url = "";
      this.$emit("update:showUpload", false);
    },}
</script>