vue的excel的文件的下载和上传

需求 - 下载后台返回的excel,修改后上传

  界面显示 -

  

   html部分 - 

        <el-upload
          class="upload-demo"
          :headers="myHeaders"  //添加请求头部
          action="http://10.19.13.31:8760/api/file/excel/usersupload" //后台上传地址
          ref="upload"
          :before-upload="beforeAvatarUpload"  //上传前 - 可以进行检查文件格式
          :on-preview="handlePreview"  //点击文件列表中已上传的文件时的钩子
          :on-remove="handleRemove"  //文件列表移除文件时的钩子
          :before-remove="beforeRemove"  //删除文件之前
          :on-success="suceess" //成功回调
          :on-error="error"   //错误回调
          :disabled="authenStatus==0?true:false"  //是否弹出加载文件的弹框
          :limit="1"  //限制加载文件数
          :on-exceed="handleExceed" //超出文件数执行
          :file-list="fileList"
        >
          <span class="file">文件 :</span>
          <el-button size="small" type="primary" class="toupFile" @click="toDown">下载模板</el-button>
          <el-button size="small" type="primary" class="toupFile" @click="toUpload">上传文件</el-button>
          <span class="tipfont">支持文件扩展名: .xlsx</span>
        </el-upload>

    js部分-

       上传文件 - 

<script>
import {downloadExcel } from '../../../api/user';  //引入下载模板的接口
var token =  localStorage.getItem('token');  //获取token
export default {
  data() {
    return {
      name: '批量导入',
      alertImport: false,
      authenStatus: 0,  //标识是否显示弹框
      fileList: [],
      myHeaders: {token}  //请求头
    };
  },
  methods: {
    goback() {
      this.$refs.upload.clearFiles();
      this.alertImport = false;
    },
    // 下载模板
    async toDown() {
      this.authenStatus = 0;
      let res  = await downloadExcel(); 
      var blob = new Blob([res], {type: 'application/vnd.openxmlformats-  officedocument.spreadsheetml.sheet;charset=utf-8'});
      var downloadElement = document.createElement('a');
      var href = window.URL.createObjectURL(blob); // 创建下载的链接
      downloadElement.href = href;
      downloadElement.download = '文件模板.xlsx'; // 下载后文件名
      document.body.appendChild(downloadElement);
      downloadElement.click(); // 点击下载
      document.body.removeChild(downloadElement); // 下载完成移除元素
      window.URL.revokeObjectURL(href); // 释放掉blob对象
    },
    // 上传文件
    toUpload() {
      //显示选取文件的弹框
      this.authenStatus = 1;
    },
    // 移除文件
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 上传文件之前
    beforeAvatarUpload(file) {
      let str =  file.name.substr(file.name.indexOf('.') + 1);
      if (str === 'xlsx') {
        return true;
      } else {
        this.$message({
          message: '文件类型只能为xlsx',
          type: 'warning',
          duration: 2000
        });
        return false;
      }
    },
    suceess() {
      this.$message({
        message: '上传成功',
        type: 'warning',
        duration: 2000
      });
    },
    error() {
      this.$message({
        message: '上传失败，文档内可能含有重复内容',
        type: 'warning',
        duration: 2000
      });
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message({
        message: `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`,
        type: 'warning',
        duration: 3000
      });
    },
    beforeRemove(file, fileList) {
      let flag = true;
      if (file && file.status === 'success') {
        flag = this.$confirm(`确定移除 ${ file.name }？`);
      }
      return flag;
    }
  }
};
</script>

所遇到的问题及解决

    1.上传文件 - 不用弹出选取文件的框体   - 利用变量进行标识 :disabled="authenStatus==0?true:false"

    2.下载文件需要对文件的格式进行转换

    3.文件上传 - 上传错误会自动调用beforeRemove -  在beforeRemove里面修改删除条件

    4.文件上传添加请求头 - 利用headers

    5.注意请求下载文件，返回的类型  responseType: 'blob'