基于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);
      });
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值