这里介绍下SpringBoot中如何接收前台页面上传的文件,以及如何下载文件。
1、文件上传
此案例我是将文件上传之后,存入数据库,文件放在当前项目的目录下。
数据库具体如下:
数据库名为:upAndLoad
表名为:pic
三个字段为pid、filename、src
pid是图片的id也是pic表的唯一主键,设置为自增字段。
filename是图片的名字。
src是存储图片的路径。
创建好表之后我们需要进行springboot的配置文件,具体如下
spring.mvc.servlet.path=/ spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.datasource.url=jdbc:mysql://localhost/upAndLoad 这里是根据自己的数据库配置 spring.datasource.username=root 数据库账号 spring.datasource.password=root 数据库密码 spring.main.allow-circular-references=true spring.servlet.multipart.enabled=true #上传文件最大为30MB spring.servlet.multipart.max-file-size=30MB #最大支持请求大小 spring.servlet.multipart.max-request-size=30MB mybatis.mapper-locations=classpath:mapper/*.xml mybatis.type-aliases-package=com.tc.vo
配置好之后我们定义一个Pic的实体类
package com.tc.vo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import java.io.Serializable; @Data @AllArgsConstructor @NoArgsConstructor public class Pic implements Serializable { private Integer pid; private String filename; private String src; }
编写一个Pic的Mapper接口
package com.tc.dao; import com.tc.vo.Pic; import org.apache.ibatis.annotations.Mapper; import java.util.List; @Mapper public interface PicDao { void savePic(Pic pic); 此方法是存入数据库 List<Pic> queryPic(); 此方法是查看上传的图片 }
Pic的xml文件,命名为PicMapper.xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!-- 设置为PicDao接口方法提供sql语句配置 --> <mapper namespace="com.tc.dao.PicDao"> <select id="queryPic" resultType="Pic"> select * from pic </select> <insert id="savePic"> insert into pic (filename,src) values(#{filename},#{src}) </insert> </mapper>
编写一个业务逻辑层接口为PicService
package com.tc.service; import com.tc.vo.Pic; import java.util.List; public interface PicService { void savePic(Pic pic); List<Pic> queryPic(); }
实现PicService接口的实现类,命名为PicServiceImpl
import com.tc.service.PicService; import com.tc.vo.Pic; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; @Service public class PicServiceImpl implements PicService { @Autowired private PicDao picDao; @Override public void savePic(Pic pic) { picDao.savePic(pic); } @Override public List<Pic> queryPic() { return picDao.queryPic(); } }
最后是上传的Controller,命名为UpController,up方法为上传,view方法为成功之后查看
package com.tc.controller; import com.tc.service.PicService; import com.tc.vo.Pic; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import javax.servlet.http.HttpSession; import java.io.File; import java.io.IOException; import java.util.List; @RestController public class UpController { @Autowired private PicService picService; @RequestMapping("upfile") public String up(MultipartFile file,String filename) throws IOException { if (!file.isEmpty()){ String oldName = file.getOriginalFilename(); String filePath = "D:/4/upAndLoad/src/main/resources/static/file/"; String path = filePath+oldName; Pic pic = new Pic(); pic.setFilename(filename); String src = path.substring(path.indexOf("static")+7,path.length()); pic.setSrc(src); picService.savePic(pic); File dest = new File(path); if (!dest.getParentFile().exists()){ dest.getParentFile().mkdir(); } file.transferTo(dest); return "true"; }else { return "false"; } } @RequestMapping("view") public List<Pic> view(){ List<Pic> list = picService.queryPic(); return list; } }
前端upAndLoad.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <style> #btn{ width: 100px; height: 40px; } </style> <body> <form action="upfile" method="post" enctype="multipart/form-data" id="form"> 请输入文件名:<input type="text" name="filename"><br> 请选择上传文件:<input type="file" name="file"><br> <input id="btn" type="button" value="上传"> </form> <script> $('#btn').click(function (){ var form = new FormData(document.getElementById('form')) $.ajax({ url:'upfile', type:'post', data:form, contentType:false, processData:false, success:function (data){ if (data){ window.location.href = 'success.html' } }, error:function (data){ } }) }) </script> </body> </html>
运行springboot项目
点击上传,跳转到success.html
sucess.html文件如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <body> <form name="form"> <div style="width: 500px;height: 500px" id="box"> <img src="" id="img"> <a style="cursor: pointer">下载</a> <input type="hidden" id="hid" name="hid"> </div> </form> <script> window.onload = function (){ $.ajax({ url:'http://localhost:8080/view', type:'post', dataType:'json', success:function (data){ console.log(data) $('img').attr('src',data[0].src) $('#hid').val(`${data[0].src}`) }, error:function (data){ } }) $('a').click(function (){ var frm = document.forms["form"]; frm.action = "down"; frm.submit(); }) } </script> </body> </html>
数据库会多一条数据,就是我们刚才上传的图片。
当点击下载时
综上所述,就是简单的一个图片下载,局限性只针对数据库第一个数据,后续会发多文件上传下载。