基于el-upload实现上传下载excel文件

基于el-upload组件实现上传下载excel文件

在vue项目中，使用了element组件，要基于其中的下载组件el-upload实现上传和下载excel的功能，发现element官网上的说明说的很不清楚，找了很多资料和实践后，总结了以下的用法。

element官网中el-upload: el-upload

说明

主要实现两部分，一是上传文件，基于el-upload;二是下载文件，这个根据具体项目要求，这里只介绍后端返回下载链接，前端打开下载链接直接进行页面下载

一、el-upload实现上传

话不多说先上代码

        <el-upload
          v-loading="uploadLoading"
          :multiple='false'
          :auto-upload='true'
          :before-upload="beforeUpload"
          :action="$newApiLocation + '/question/importQuestionExcel'"
          :limit="1"
          :on-exceed="handleExceed"
          :http-request="uploadExcel"
          :file-list="fileExcelList">
          <el-tooltip class="item" effect="dark" content="请根据模板批量上传题目！" placement="top">
            <el-button><i class="el-icon-upload2"></i>批量上传</el-button>
          </el-tooltip>
        </el-upload>

这里主要涉及的点都是在el-upload上的设置

1.handleExeed方法为文件数量超过limit时触发的方法

    // 上传文件个数超过定义的数量
    handleExceed (files, fileList) {
      this.$message.warning('当前限制选择 1 个文件，请删除后继续上传');
    },

2.file-list为上传的文件所存储的字段，不需要可以隐藏

3.auto-upload为选择文件自动上传

4.beforeUpload为文件上传前调用的方法，即调取接口传数据前，对数据的处理

    // 上传文件之前的钩子
    beforeUpload (file) {
      const isText = file.type === 'application/vnd.ms-excel';
      const isTextComputer = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isText && !isTextComputer) {
        this.$message.warning('请上传excel格式文件！');
      };
      return (isText || isTextComputer);
    },

这里限制了上传文件类型为excel文件，如有需要可以设置文件的大小等等

5.http-request绑定的方法是真正处理文件上传的方法，在此调用接口，错误处理等等

    // 提交批量上传题目的excel表格
    uploadExcel (item) {
      this.uploadLoading = true;
      const fileObj = item.file;
      const form = new FormData();
      form.append('file', fileObj);
      form.append('surveyId', this.$route.params.surveyId);
      this.importQuestionExcel(form).then(res => {
        this.$message.success('文件：' + fileObj.name + '上传成功，题目批量添加完成！');
        // 上传成功后，重新获取问题列表,并清空excel列表，可继续上传
        this.getSurveyQuestion(this.$route.params).then(() => {
          this.fileExcelList = [];
        }).finally(() => {
          this.fileExcelList = [];
        });
      }).catch(() => {
        // this.$message.error('文件：' + fileObj.name + '上传失败！');
      }).finally(() => {
        this.fileExcelList = [];
        this.uploadLoading = false;
      });
    },

其中，this.importQuestionExcel（）为绑定的post接口,注意这里的：action也要将此接口地址绑定。

由此，便可将数据传递到后端

二、基于a链接实现打开下载链接防抖

需要下载文件时，如果数据存在数据库，通过后端返回的下载地址，直接打开进行下载。有如下方式：

1、直接使用window.open()打开链接

页面会出现抖动

2、利用a链接的href属性，打开链接

流程是：直接用js创建一个隐藏的a链接，将后端返回的下载链接赋给href,触发a链接click事件，实现文件下载，然后删除a链接。整个过程不会看到a链接，而且页面不会抖动

      this.downloadExcel(params).then(res => {
        const url = res;
        // window.open(url);
        // 创建a标签下载返回的下载地址
        const elink = document.createElement('a'); // 创建a标签
        elink.style.display = 'none';
        elink.href = url;
        document.body.appendChild(elink);
        elink.click(); // 触发点击a标签事件
        document.body.removeChild(elink);
      });