vue-pc后台管理系统：文件导入和导出(五)

后台管理系统肯定会涉及文件的导入和导出，因此根据我的了解做个总结。

我这里举例是xls、xlsx

涉及的组件是el-upload

<template>
 <div class="third">
    <h3>文件的导入和导出</h3>
    <div class="flex">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>导入</span>
        </div>
        <el-upload
          class="upload-demo"
          :http-request="uploadVerify"
          :show-file-list="false"
          accept=".xls,.xlsx"
          action=""
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__text">只能上传.xls,.xlsx文件</div>
          <div class="el-upload__tip" slot="tip">{{ fileName }}</div>
          <el-button  @click="uploadBtn">导入</el-button>
        </el-upload>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>导出</span>
        </div>
        <el-button @click="downloadBtn">导出</el-button>
      </el-card>
    </div>
  </div>
</template>

1.导入

上传文件格式检验

<script>
import { uploadExcel } from "@/api/index.js";
export default {
  name: "Third",
  methods: {
    // 校验xls、xlsx格式
    uploadVerify(param) {
      console.log("param", param);
      if (param.file != undefined) {
        let fileName = param.file.name;
        let fileTypes = ".xls|.xlsx|";
        let fileType = fileName
          .substring(fileName.lastIndexOf("."))
          .toLowerCase();
        if (fileTypes.indexOf(fileType) === -1) {
          this.$msg("error", "上传模板只能是xls、xlsx格式", 2000);
          return;
        }
        this.file = param.file;
        this.fileName = param.file.name;
      } else {
        this.$msg("error", "上传模板只能是xls、xlsx格式", 2000);
        return;
      }
    },
  },
};
</script>

导入文件

// 提交导入
    uploadBtn() {
      let file = this.file;
      const loading = this.$loading({});
      if (JSON.stringify(file) == "{}" || file == undefined) {
        this.$msg("error", "请选择要上传的文件", 2000);
        loading.close();
        return;
      }
      //导入的文件格式
      let formData = new FormData();
      formData.append("file", file);
      uploadExcel(formData).then((res) => {
        if (res.code == 200) {
          this.$message.success("导入成功");
          loading.close();
          this.file = "";
          this.fileName = "";
        }
      });
    },

@/api/index.js

这样就实现了单个文件的导入

---

2.文件的导出

文件的导出分两种，需要和后台进行商量
第一种：后台返回二进制流
第二种：后台返回url地址

后台返回二进制流

  //导出文件
    downloadBtn() {
      downLoadExcel().then((res) => {
        var reader = new FileReader();
        reader.onload = function (e) {
          var message = e.target.result;
          //如果失败，显示失败的原因
          if (this.isJson(message)) {
            var result = JSON.parse(message);
            if (result.msg != undefined) {
              this.$msg("error", result.msg, 2000);
            } else {
              this.$msg("error", "导出失败!", 2000);
            }
          } else {
          //下载文件
            let url = window.URL.createObjectURL(res.data);
            let link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", decodeURI(res.headers.filename));
            document.body.appendChild(link);
            link.click();
          }
        };
        reader.readAsText(res.data);
      });
    },
    //校验json
    isJson(str) {
      if (typeof str == "string") {
        try {
          var obj = JSON.parse(str);
          if (typeof obj == "object" && obj) {
            return true;
          } else {
            return false;
          }
        } catch (e) {
          return false;
        }
      }
    },
  },

@/api/index.js

后台返回url地址

这种只需要调用window.open(url),就可以进行文件自动下载了

项目到这，已经开始和后台接口进行对接了，下节说接口api模块化的搭建