最近在开发一个 微信微信小程序的后台管理系统,在这个系统中遇到了一个需求,就是用户需要上传一个 Excel 文件到服务器端,服务器端对文件解析,然后将解析得到的数据存入数据库当中。
目前使用 Java 实现对 Excel 解析的功能已经实现。前人已经帮助我们造好了轮子,我直接用就好了,通过在网上一番搜索,我查到了两种方式可以实现对 Excel 解析的第三方库
-
POI (Apache 出品)
-
easyExcel (阿里巴巴项目组出品)
这里我只是提一下有哪些工具可以协助我们完成文件解析的工作,我们今天的重心是如何实现在 Vue CLI4 创建的项目中,实现文件的上传功能。
=====================================================================================
2.1 SpringBoot 后端部分功能实现 —— 配置文件部分
在 application.yml 文件中做如下相关配置
-
是否开启文件上传的功能,以及配置文件写入大小,等等一些其他内容
-
自定义文件存储路径 (将从前端上传的文件保存至我们的本地)
spring:
servlet:
multipart:
enabled: true # 开启文件上传
file-size-threshold: 2KB # 文件写入磁盘的阈值
max-file-size: 100MB
max-request-size: 215MB # 最大请求值大小
自定义文件保存路径
gorit:
file:
root:
path: I:\dev\
2.2 SpringBoot 后端文件上传的 controller 编写
package cn.gorit.controller.api.v1.file;
import cn.gorit.common.lang.Result;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
@Api(value = “文件上传,下载相关功能”)
@RestController
@RequestMapping(“/api/v1”)
public class FileController {
// 设置固定的日期格式
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd”);
// 将 yml 中的自定义配置注入到这里
@Value(“${gorit.file.root.path}”)
private String filePath;
// 日志打印
private Logger log = LoggerFactory.getLogger(“FileController”);
// 文件上传 (可以多文件上传)
@PostMapping(“/upload”)
public Result fileUploads(HttpServletRequest request,@RequestParam(“file”) MultipartFile file) throws IOException {
// 得到格式化后的日期
String format = sdf.format(new Date());
// 获取上传的文件名称
String fileName = file.getOriginalFilename();
// 时间 和 日期拼接
String newFileName = format + “_” + fileName;
// 得到文件保存的位置以及新文件名
File dest = new File(filePath + newFileName);
try {
// 上传的文件被保存了
file.transferTo(dest);
// 打印日志
log.info(“上传成功,当前上传的文件保存在 {}”,filePath + newFileName);
// 自定义返回的统一的 JSON 格式的数据,可以直接返回这个字符串也是可以的。
return Result.succ(“上传成功”);
} catch (IOException e) {
log.error(e.toString());
}
// 待完成 —— 文件类型校验工作
return Result.fail(“上传错误”);
}
}
---------- 2020年12月2日补充 ----------
后台收到了多个小伙伴的询问,cn.gorit.common.lang.Result;
中的 Result 类是啥意思。
这个类的作用是我自定义的一个通用返回结果集,一般情况下返回的数据格式如下
{
“code”: 200,
“msg”: “success”,
“data”: “”
}
如果要想返回指定格式的数据,只需要加入泛型即可 Result< T >
package cn.gorit.common.lang;
public class Result {
private Object data;
private String msg;
private int code;
// getter setter 省略,构造方法省略
// 操作成功返回数据
public static Result succ(Object data) {
return succ(200, “操作成功”, data);
}
public static Result succ(String msg) {
return succ(200, msg, null);
}
public static Result succ(int code, String msg, Object data) {
Result r = new Result();
r.setCode(code);
r.setMsg(msg);
r.setData(data);
return r;
}
public static Result succ(String msg, Object data) {
return succ(200,msg,data);
}
// 操作异常返回
public static Result fail(int code, String msg, Object data) {
Result r = new Result();
r.setCode(code);
r.setMsg(msg);
r.setData(data);
return r;
}
public static Result fail(String msg) {
return fail(400,msg,null);
}
public static Result fail(int code, String msg) {
return fail(code,msg,“null”);
}
public static Result fail(String msg, Object data) {
return fail(400,msg,data);
}
}
2.3 Vue 前端编写
文件上传我自己编写了一个对话框上去
逻辑代码如下
<el-button class=“btn-upload” type=“primary” @click=“handleUpdate”>上传题库
<el-dialog
title=“提示”
:visible.sync=“dialogVisible”
width=“30%”
<el-upload class=“upload-demo”
ref=“upload”
drag
action=“http://localhost:9999/api/v1/upload”
multiple
:auto-upload=“false”
:limit=“5”
:on-success=“handleFilUploadSuccess”
:on-remove=“handleRemove”
<el-button @click=“dialogVisible = false”>取 消
<el-button type=“primary” @click=“handleUpload”>确 定