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

    技术2022-07-11  116

    废话不多说直接上代码

    前台 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(); }
    Processed: 0.011, SQL: 10