关于在vue2中elementUI上传下载组件搭配后端接口的使用

        1.下载(导出)：

        前端代码：

//点击导出或者下载按钮触发该方法
exportTable() {
      const params = {
        //接口中传的参数
      };
         //接口调用
      exportYbq(params).then((res) => {
        if (res) {
          const blob = new Blob([res], {
            type: "application/vnd.ms-excel",
          });
          if (window.navigator.msSaveOrOpenBlob) {
            navigator.msSaveBlob(
              blob,
              "文件名.xlsx"
            );
          } else {
           var link = document.createElement("a");
            link.href = window.URL.createObjectURL(blob);
            link.download = "文件名.xlsx";
            link.click();
            //释放内存
            window.URL.revokeObjectURL(link.href);
          }
        } else {
          // 返回json
          this.$message.warning("未知错误，请联系管理员");
        }
      });
    },

        接口代码：

// 导出。
export function exportYbq(params) {
  return request({
    url: `/xxxxxxx`,
    method: "post",
    params,
    responseType: "blob"
  });
}

        2.上传(导入)：

        前端代码： 

<div class="boxHZ" v-if="dialogVisible">
      <div class="boxTitle">
        <img src="@/assets/imgs/slgc/报表导入@1x.png" alt="" class="icon" />
        <span>{{ dialogTitle }}</span>
        <img
          src="@/assets/imgs/slgc/关闭.png"
          alt=""
          class="gb"
          @click="cancelImport"
        />
      </div>
      <div class="tableContent">
        <el-upload
          ref="upload"
          class="upload-demo"
          drag
          :limit="1"
          accept=".xlsx, .xls"
          action="#"
          :http-request="httpRequest"
          :before-upload="beforeUpload"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或<em style="color: #f7e850">点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">
            <span style="color: #fff">仅允许导入xls、xlsx格式文件</span>
          </div>
        </el-upload>
        <div class="uploadFooter">
          <el-button
            style="
              background: #157ac5;
              border-radius: 6px 6px 6px 6px;
              border: 1px solid #63bdff;
              color: #fff;
            "
            @click="cancelImport"
            >取 消</el-button
          >
          <el-button
            style="
              background: #b36c00;
              border-radius: 6px 6px 6px 6px;
              border: 1px solid #f7e850;
              color: #fff;
            "
           @click="submitImport"
            :loading="uploadFlag"
            >确 定</el-button
          >
        </div>
      </div>
    </div>

importTable() {
      this.dialogVisible = true;
    },
    httpRequest(file) {
      console.log("file:", file);
      this.file = file.file;
    },
    beforeUpload(file) {
      const fileSize = file.size / 1024 / 1024;
      if (fileSize > 50) {
        this.$message.warning("上传文件大小不能超过 50MB");
        return false;
      }
    },
    // 确认导入
    submitImport() {
      this.uploadFlag = true;
      let formData = new FormData();
      formData.append("file", this.file);
    //params不用可以不写，根据接口需求而异
      const params = {
        dataType: "0",
      };
      importData(params, formData).then((res) => {
        if (res.code == 200) {
          this.$message({
            message: "上传成功！",
            type: "success",
          });
          this.dialogVisible = false;
          this.importForm = {};
          this.$refs.upload.clearFiles(); //清空上传列表
          this.uploadFlag = false;
        } else {
          this.$message({
            message: "上传失败，请重试！",
            type: "error",
          });
          this.uploadFlag = false;
        }
      });
    },
    cancelImport() {
      this.dialogVisible = false;
      this.$refs.upload.clearFiles(); //清空上传列表
    },

        接口代码：

// 导入数据。
export function importData(params,data) {
    return request({
      url: `/xxxx`,
      method: "post",
      params,
      data
    });
  }

       所用到的变量：

      dialogTitle: "报表导入",
      dialogVisible: false,
      file: null,
      // 上传标识
      uploadFlag: false,

        css样式：

::v-deep {
  .el-dialog {
    background: #fff;
  }
  .el-dialog:not(.is-fullscreen) {
    margin-top: 22vh !important;
  }
  .el-upload-dragger {
    background: rgba(10, 57, 115, 0);
    border: 1px dashed #13efff;
  }
  .el-upload-dragger .el-icon-upload {
    color: #43b4f1;
  }
  .el-upload__text {
    color: #fff;
  }
  .el-upload-list__item:hover{
    background-color: #0a3973;
  }
  .el-upload-list__item-name,.el-upload-list__item .el-icon-close,.el-upload-list__item-name [class^=el-icon] {
    color: #fff;
  }


.upload-demo {
  width: 52%;
  margin: 4vh auto;
}


.boxHZ {
  z-index: 2001;
  width: 36vw;
  position: fixed;
  top: 32%;
  right: 29%;
  background: rgba(10, 57, 115, 1);
}
.boxTitle {
  height: 40px;
  background: linear-gradient(to right, #0789db 0%, rgba(7, 137, 219, 0) 100%);
  border-bottom: 1px solid;
  border-image: linear-gradient(to right, #69d4ff, rgba(7, 137, 219, 0)) 1;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 13px;
  span {
    flex: 1;
    padding-left: 10px;
    font-weight: 500;
    font-size: 18px;
    color: #ffffff;
    line-height: 0;
  }
  .icon {
    width: 18px;
    height: 18px;
  }
  .gb {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }
}
.uploadFooter {
  width: 52%;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2vh;
}