vue+element加入导入Excel文件功能 前后台代码实现

在这里插入图片描述
在这里插入图片描述
废话不多说直接上代码

前台
element 自身就带了 导入的组件

 <el-button size="small"  v-if="isAuth('sys:holiday:holiday:exp')">批量导入</el-button>
 <el-upload
            class="upload-btn"
            :action="uploadUrl"
            accept=".xls, .xlsx"
            :on-success="handleAvatarSuccess"
            :on-progress="uploadProgress"
            :on-error="handleUploadError"
            :show-file-list="false"
          >

这个组件 的action事件 然后里面有url。
这里我们来注意一下分一下excel 导入的具体实现。就是上传excel 表,然后指定路径上,上传成功后,读取excel 表,然后对数据进行处理 实现。
所以1发送url到文件上传地方

export default {
    mixins: [requestTime],
    data () {
      return {
        year: '',
        uploadUrl:  this.$http.adornUrl(
          `/file/normalUpload?token=${this.$cookie.get('token')}`
        ),

这里因为项目里多次会用到,就封装起来

 @RequestMapping(path = "/normalUpload")
    @ResponseBody
    public R normalUpload(HttpServletRequest request, HttpServletResponse response) throws IOException {
        DiskFileItemFactory factory = new DiskFileItemFactory();
        ServletFileUpload sfu = new ServletFileUpload(factory);
        sfu.setHeaderEncoding("utf-8");

        String savePath = this.fileUploadPathTemp;

        String fileUrl = "";
        String fielName = "";

        try {
            List<FileItem> items = sfu.parseRequest(request);
            for (FileItem item : items) {
                if (!item.isFormField()) {
                    fielName = item.getName();
                    String ext = fielName.substring(fielName.lastIndexOf("."));
                    String newFileName = UUID.randomUUID().toString();
                    File file = new File(savePath);
                    if (!file.exists()) {
                        file.mkdir();
                    }
                    fileUrl = savePath + File.separator + newFileName + ext;
                    File tempFile = new File(fileUrl);
                    FileUtils.copyInputStreamToFile(item.getInputStream(), tempFile);
                }
            }
        } catch (FileUploadException e) {
            throw new RRException("上传异常");
        }
        return R.ok().data("url", fileUrl).data("fielName", fielName);
    }

当文件上传成功后,判断它的返回的值,然后到发起请求url的后台,对文件进行读取进行操作

//导入功能
      handleAvatarSuccess (res, file) {
        // this.uploadloading.close();
        console.log(res);
        if (res && res.code === 0) {
          let fileUrl = res.data.url;

          this.$http({
            url: this.$http.adornUrl("/sys/holiday/imp"),
            method: 'post',
            data: this.$http.adornData({fileUrl: fileUrl}, false)
          }).then(({data}) => {
            if (data && data.code === 0) {

            } else {
              this.$errorMessage(data.msg)
            }
          })
          this.$message({
           message: '导入成功',
           type: 'success',
             duration: 1000,
          onClose: () => {
             this.getDataList()
         }
        })
        } else {
          this.$errorMessage(res.msg);
        }
      },

后台

@PostMapping("/imp")
    public R imp(@RequestBody String params) throws Exception, IOException {
     //接受前台从页面传来的文件地址参数
        JSONObject json = JSON.parseObject(params);
        //把他从json格式中取出来
        String fileUrl = json.getString("fileUrl");
        String config = "excel/sys/holiday-imp.xml";
        ExcelImportor importor = new ExcelImportor(config, fileUrl, new FileInputStream(fileUrl));
        //读取数据
        ExcelImportData data = importor.loadData();

        List<Map<String, Object>> list = (List<Map<String, Object>>) data.getDatas().get("holiday");
        if (list != null && list.size() > Constant.IMPORT_MAX_NUM) {
            throw new RRException("导入超过最大限制:" + Constant.IMPORT_MAX_NUM + "条");
        }
        //存放错误信息
        List<Object> errDate = Lists.newArrayList();
        //如果存在错误的数据日期,处理结束,显示错误信息【文件中存在无效的数据日期:xx,xx,xx】
        for (Map<String, Object> stringObjectMap : list) {
        //获取需要的数据日期 
            Object dataDate = stringObjectMap.get("dataDate");
            try {
                //统一格式把读取到数据日期转换成string
                String date = dataDate.toString();
                //然后转化成date
                String format = DateUtils.format((Date) dataDate);
                //存到读取数据的对象里 日期就ok了
                stringObjectMap.put("dataDate",format);

            } catch (Exception e) {
                errDate.add(dataDate);
            }
        }
   //错误的数据》0 抛出异常
        if (errDate.size() > 0) {
        
            throw new RRException(errDate.toString());
        }
        //把我读取到的数据转化成,于实体类一样对应的
        List<SysHolidayEntity> sysHolidayEntities = JSON.parseArray(JSON.toJSONString(list), SysHolidayEntity.class);
        sysHolidayService.save(sysHolidayEntities);
        return R.ok();
    }
相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样的学习方式能让你保持兴趣、充满动力,时刻知道学的东西能用在哪、能怎么用。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白的知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采用了前后端分离的开发模式,端使用Vue.js+Element UI实现了Web页面的呈现,后端使用Python 的Django框架实现了数据访问的接口,端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端的各自承担的工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0的开发,项目包含了如下几个内容:项目的总体介绍、基本功能的演示、Vuejs的初始化、Element UI的使用、在Django中实现针对数据的增删改查的接口、在Vuejs中实现端增删改查的调用、实现文件的上传、实现表格的分页、实现导出数据到Excel实现通过Excel导入数据、实现针对表格的批量化操作等等,所有的功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大的亮点在于前后端做了分离,真正理解前后端的各自承担的工作。端如何和后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web端基础,想要深入学习Python Web框架的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战的朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础的朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页

打赏作者

candybaby1223

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值