在Spring Boot前后端分离环境下做文件上传, 在生产环境中, 我们可以搭建独立的文件服务器, 结合FastDFS还可以搭建独立的分布式文件服务系统, 这样文件管理服务器不仅方便管理还易于扩展, 可以解决临时目录丢失的问题.
如果网络请求使用Axios, 那么文件上传有两种不同的实现方式:
后端配置
上传的准备工作, 其实本质就是在后端提供一个文件上传接口
单文件上传
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
| @RestController public class FileUploadController {
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/"); @PostMapping("/upload") public String upload(MultipartFile file, HttpServletRequest request) { String realPath = request.getServletContext().getRealPath("/"); String format = sdf.format(new Date()); String path = realPath + format; File folder = new File(path); if(!folder.exists()) { folder.mkdirs(); } String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf(".")); try { file.transferTo(new File(folder, newName)); String s = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + format + newName; return s; } catch (IOException e) { e.printStackTrace(); } return ""; } }
|
上传的文件按照日期进行归类, 使用UUID给文件重命名避免重名
多文件上传
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
| @RestController public class MultiFileUploadController {
SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/MM/dd/"); @PostMapping("/upload2") public void upload2(MultipartFile[] files, HttpServletRequest request) { String realPath = request.getServletContext().getRealPath("/"); String format = sdf.format(new Date()); String path = realPath + format; File folder = new File(path); if(!folder.exists()) { folder.mkdirs(); } try { for (MultipartFile file : files) { String oldName = file.getOriginalFilename(); String newName = UUID.randomUUID().toString() + oldName.substring(oldName.lastIndexOf(".")); file.transferTo(new File(folder, newName)); String s = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + format + newName; System.out.println("s = " + s); } } catch (IOException e) { e.printStackTrace(); } } }
|
多文件上传使用的是数组MultipartFile[], 需要遍历上传的文件
通过Ajax实现文件上传
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> </head> <body> <div id="result"></div> <input type="file" id="file"> <input type="button" value="上传" onclick="uploadFile()"> <script> function uploadFile() { var file = $("#file")[0].files[0]; var formData = new FormData(); formData.append("file", file); formData.append("username", "sihai"); $.ajax({ type:'post', url:'/upload', processData: false, contentType: false, data: formData, success: function (msg) { $("#result").html(msg); } }) } </script> </body> </html>
|
- 从file对象中, 获取要上传的文件, 由于此处为单文件上传, 所以获取数组中的第一项
- 构建一个FormData, 用于存放上传的数据, FormData不可以像Java中的StringBuffer使用链式配置
- 构建好FormData后便可以上传数据, FormData就是需要上传的数据
- 1.请求方法为post
2.设置Content-Type为multipart/form-data