20201231——VUE2.0 Element-UI Excel 上传+后台读取 学习记录

VUE2.0 Element-UI Excel 上传+后台读取 学习记录

目前是 单个表格 纯文字数据 的导入
前端代码：

 
 点击上传（选择文件）
 
只能上传Excel格式的文件，且不超过10M
 
  确认上传

首先是自动上传， :auto-upload 表示是否在选取文件后立即进行上传，不写 默认为true. 这里的accept就是上传文件类型限制，表示的是限制Excel文件，当然也可以在 :before-upload方法里做自定义，上传成功或失败可通过自定义 :on-success，:on-error 方法来显示相关提示。手动上传**:auto-upload** 就改为false，然后点击确认上传调用 this.$refs.fileUpload.submit()；fileUpload对应标签里的ref.

后台代码：

@PostMapping("/importExcel")
@ResponseBody
public void importExcel(HttpServletRequest request, @RequestParam(value = "file")MultipartFile upload) throws Exception  {
        System.out.println(request.getHeader("Content-Type"));
        ExcelReader reader = ExcelUtil.getReader(upload.getInputStream(), 0);
        List> read = reader.read();
        System.out.println(JSON.toJSONString(read));
        System.out.println(upload.getOriginalFilename());
}
控制台打印：
multipart/form-data; boundary=----WebKitFormBoundaryuoLreC4OG1JdXBBB
[["测试报表","测试报表","测试报表","测试报表","测试报表","测试报表"],
["序号","描述","状态","创建时间","结束时间","名称"],
[78,"报警测试",2,1605511430,"","流程3"],
[77,"报警测试",2,1605506670,"","流程3"],
[76,"报警测试",2,1605506656,"","流程5"],
[75,"报警测试",2,1605504190,"","流程6"] ]
测试列表.xlsx


后台读取用的是Hutool工具，maven

            cn.hutool
            hutool-all

@RequestParam(value = “file”)一定要写，之前一直不知道这个参数名，一直空指针。

以上便是这次学习的简单记录，java开发新人，欢迎交流.