vue---element el-upload批量导入案例

最新推荐文章于 2024-05-12 15:50:08 发布

maidu_xbd

最新推荐文章于 2024-05-12 15:50:08 发布

阅读量987

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/maidu_xbd/article/details/107621569

版权

vue 专栏收录该内容

107 篇文章 9 订阅

订阅专栏

问题描述：点击【批量导入】按钮弹出批量导入对话框，实现模板下载及文件导入功能；

解决步骤：

（1）批量导入按钮

  <el-button type="warning" icon="el-icon-upload2" size="mini" @click="batchAddGraph">批量导入</el-button>

(2)点击按钮，弹出对话框

（3）上传文件，下载模板相关方法

   // 以下是批量导入的方法
    // 下载模板
    downloadTemplate() {
      templateDownload()
        .then((res) => {
          // 生成并下载文档
          let text = res.data;
          var pom = document.createElement("a");
          pom.setAttribute(
            "href",
            "data:text/plain;charset=utf-8," +
              encodeURIComponent(JSON.stringify(text, null, 4))
          );
          pom.setAttribute("download", "template.json");
          if (document.createEvent) {
            var event = document.createEvent("MouseEvents");
            event.initEvent("click", true, true);
            pom.dispatchEvent(event);
          } else {
            pom.click();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 选择zip
    selectZipFile() {
      this.$refs.bactchImport.clearFiles();
    },
    // 批量导入新的图谱信息
    batchAddGraph() {
      this.dialogTitle = "批量导入";
      this.batchImportDialogVisible = true;
      this.batchImportUrl = " /api/manage/common/graph/add/batch";
    },
    // 批量导入已存在的图谱信息
    batchUpdateGraph(name) {
      this.dialogTitle = `批量导入${name}图谱`;
      this.uploadData = {
        userID: "", //暂时为空
        graphName: this.graphName,
      };
      this.batchImportDialogVisible = true;
      this.batchImportUrl = " /api/manage/common/graph/update/increment";
    },
    // 提交批量导入
    submitBatchImport() {
      if (!this.$refs.bactchImport.uploadFiles.length == 0) {
        this.loading = this.$loading({
          lock: true,
          text: "正在导入图谱,请稍等",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.6)",
        });
        this.isUploadFlag = true;
        this.$refs.bactchImport.submit();
      } else {
        this.$message.warning("请选择要上传的文件");
      }
    },
    // 关闭对话框-清除照片
    closebactchImportForm() {
      this.isUploadFlag = false;
      this.$refs.bactchImport.clearFiles();
    },
    // 批量上传成功的钩子
    bactchImportSuccess(res, file, fileList) {
      if (res.respCode === "200") {
        this.$message.success("批量导入图谱成功");
        this.graphDialogVisible = false;
        this.isUploadFlag = false;
        this.getGraphInfo();
      } else {
        this.$message.error(res.respDesc);
      }
      this.batchImportDialogVisible = false;
      this.loading.close();
    },
    // 批量导入-文件状态改变时的钩子
    bactchImportChange(file, fileList) {
      // console.log("文件状态改变时的钩子");
      if (!/.(json|rdf|csv)$/.test(file.name)) {
        this.$refs.bactchImport.uploadFiles = [];
        this.$message.warning("请选择json或rdf格式的文件");
      }
    },
    // 上传文件前的钩子
    beforebactchImport(file) {
      // console.log("上传文件前的钩子");
    },
    // 文件上传时的钩子
    bactchImportProgress(event, file, fileList) {
      // console.log("==文件上传时progress==", file);
    },
    // 批量导入失败时的钩子
    bactchImportError() {
      this.$message.error(" 批量导入失败");
      this.isUploadFlag = false;
      this.loading.close();
    },
    //文件列表移除文件时的钩子
    bactchRemoveFile() {
      // console.log("移除");
    },

tips: