SpringBoot + Vue 前后端分离项目实现文件上传至本地以及文件下载功能 |
您所在的位置：网站首页 › vue实现上传下载 › SpringBoot + Vue 前后端分离项目实现文件上传至本地以及文件下载功能 |
SpringBoot + Vue 前后端分离项目实现文件上传至本地以及文件下载功能
|
SpringBoot + Vue 实现文件上传功能一、需求说明二、文件上传功能 （上传在我们计算机的本地）2.1 SpringBoot 后端部分功能实现 —— 配置文件部分2.2 SpringBoot 后端文件上传的 controller 编写2.3 Vue 前端编写三、文件下载功能3.1 配置后端服务的静态资源路径3.2 Vue 前端实现下载功能
一、需求说明 最近在开发一个 微信微信小程序的后台管理系统，在这个系统中遇到了一个需求，就是用户需要上传一个 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 前端编写文件上传我自己编写了一个对话框上去
逻辑代码如下 上传题库 将文件拖到此处，或点击上传 只能上传 Excel 文件，且不超过500kb 取 消 确 定 export default { name: "Upload", data () { return { dialogVisible: false } }, methods: { handleRemove(file,fileList) { console.log(file,fileList); }, submitUpload() { this.$refs.upload.submit(); }, // 文件上传成功时的函数 handleFilUploadSuccess (res,file,fileList) { console.log(res,file,fileList) this.$message.success("上传成功") }, handleUpdate () { this.dialogVisible = true; }, // 处理文件上传的函数 handleUpload () { // console.log(res,file) this.submitUpload() this.dialogVisible = false } } } .btn-upload { top: 70px; right: 40px; position: fixed; z-index: 100; border-radius: 30px; box-shadow: 0 2px 12px 0 rgba(91, 156, 255, 0.9) } .el-upload { margin: 5px; }前端上传我还用到了 Element UI 组件，并且我禁用了自动上传到后端的功能，用户可以一次添加多份文件，然后最终一起上传
在后台可以看到打印的 日志信息
我们进入该路径查看上传好的内容
可以看到上传好的文件在上面了 三、文件下载功能2020年7月31日 补充更新 其实这个问题第二天就解决了，然后现在也到月底了，也给自己这篇文章画上一份完结的计划。 文件下载的逻辑，其实没有很复杂，我们是用一个 a 标签，然后加上一个 download 属性，href 就对应静态资源在后端服务的地址，就可以实现下载功能了。 3.1 配置后端服务的静态资源路径我们在创建好的 SpringBoot 项目中，资源目录专门存放在 resources 目录下，里面有个 static 目录和 templates 目录。这里我们会用到 static 目录作为我们的静态资源的路径。 我们在学习 SpringBoot 整合 SpringMVC 的时候，我们需要自己编写一个 配置类，来指定 SpringBoot 项目的静态资源的目录。配置类的编写如下 package cn.gorit.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * 开启 mvc支持，设置 static 目录为类路径 */@Configurationpublic class WebMvcConfig implements WebMvcConfigurer { // 得到 classpath 的根路径， resources 目录下的所以路径都可以得到 @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry .addResourceHandler("/static/**") .addResourceLocations("classpath:/static/"); }}这样做的话，我们就可以在静态文件里面编写静态页面，并在后端服务显示了。但是我们的项目是 前后端分离的，所以就不会在 static 目录里面编写任何静态页面，我们把需要下载的静态资源放进去
然后在外面，这个静态资源的请求路径就是 http://localhost:xxx/data/你的文件名称 3.2 Vue 前端实现下载功能我们看下这个下载的链接有什么特殊的。这里我们参考菜鸟教程给的格式来修改
我们来看看两个属性的作用 href 表示资源的路径，download 表示指定下载的文件说完就改，我们的资源是放在 SpringBoot 的 resources 目录下。我们也在前面配置了 SpringMVC 的相关配置，这样这个静态资源之后就可以获取到了。 可以先看看效果如何
然后我们直接在 href 中填写，后端指定资源的路径，就完成下载功能啦 Excel模板下载如果你有更好的方法，欢迎留言点赞哦~ |
【本文地址】
今日新闻 |
推荐新闻 |