vue 批量添加

1.html

    <div>
      <a-modal
        title="批量添加"
        :visible="lostVisible"
        @ok="losthandleOk"
        @cancel="losthandleCancel"
        okText="保存"
        cancelText="取消"
      >
        <a-row>
          <a-col :span="12">
            <div style="text-align: center">
              <a-button type="primary" @click="ExportQuestionTemplate()">
                下载模板
              </a-button>
            </div>
          </a-col>
          <a-col :span="12">
            <div style="text-align: center">
              <a-upload
                :data="{ isup: 1 }"
                :before-upload="beforeUpload"
                :customRequest="imgBodyupload"
                :show-upload-list="false"
              >
                <a-button type="primary"> 导入模板 </a-button>
              </a-upload>
            </div>
          </a-col>
        </a-row>
      </a-modal>
    </div>

2.下载模板

    //下载模板
    async ExportQuestionTemplate() {
      const res = await this.$api.ExportQuestionTemplate();
      if (res.success) {
        this.$message.success(res.msg);
        window.open(res.response);
      } else {
        this.$message.warning(res.msg);
      }
    },

3.上传前校验 =》上传文件 =》调用接口

    // 文件上传前校验
    beforeUpload(file) {
      const isxlsx =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isxlsx) {
        this.$message.error("文件格式错误，请上传xlsx格式");
      }
      return isxlsx;
    },
    // 上传文件
    imgBodyupload(file) {
      const formData = new FormData();
      formData.append("file", file.file);
      formData.append("libId", this.libId);
      this.UploadQuestion(formData);
    },
    // 上传文件
    async UploadQuestion(formData) {
      const res = await this.$api.UploadQuestion(formData);
      if (res.success) {
        this.lostVisible = false;
        this.$message.success(res.msg);
        this.QuestionLibraryQuery();
      } else {
        this.$message.warning(res.msg);
      }
    },