在项目中难免会经常使用到文件上传，去找了一些资料，整理成工具类，方便以后直接使用。在这里使用一个demo记录，代码如下：
使用ajax提交数据的HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1 >图片上传Demo</h1> <form action="/fileUpload" method="post" enctype="multipart/form-data"> <p>选择文件: <input id="sel_file" type="file" name="photo"/></p> <p><input class="submit" type="submit" value="提交"/></p> </form> <script src="../static/js/jquery-3.3.1.min.js"></script> <script> $(".submit").on("click",function () { var formData = new FormData(); formData.append("photo",$("#sel_file")[0].files[0]); $.ajax({ url:'/fileUpload', dataType:'json', type:'POST', async: false, data: formData, processData : false, // 使数据不做处理 contentType : false, // 不要设置Content-Type请求头 success: function(data){ console.log(data); alert(data.msg); }, error:function(response){ alert('上传异常！'); } }); }); </script> </body> </html>
值得注意的地方是：
-
formData.append里面的key要和文件的input标签的name属性值一致 -
ajax的两个重要属性要设置为false，否则上传会异常：-
-
processData : false,// 使数据不做处理 -
contentType : false,
-
-
下面是后端代码
使用springboot文件上传，需要给出相应的配置
# 设置单个文件最大内存 spring.servlet.multipart.max-file-size=10MB # 单次请求的文件最大内存 spring.servlet.multipart.max-request-size=50MB # 自定义文件上传路径 web.upload-path=D:/upload/
上传请求处理的controller
@Controller public class FileUploadController { //路径 @Value("${web.upload-path}") private String path; @PostMapping("/fileUpload") @ResponseBody public Map<String, String> upload(@RequestParam(value = "photo")MultipartFile file) throws IOException { Map<String, String> map = new HashMap<>(); if (!file.isEmpty()) { //存储文件的路径 + 文件分隔符 （'/'）+ 文件名 File filePath = new File(path + File.separator + file.getOriginalFilename()); //路径不存在就创建一个 if (!filePath.getParentFile().exists()) { filePath.getParentFile().mkdirs(); } //保存文件 file.transferTo(filePath); map.put("msg", "success"); }else { map.put("msg", "文件不存在"); } return map; } }
一个上传后的文件不会使用原文件名，而是随机生成的不重复的文件名，可以使用UUID生成
使用UUID随机生成新的文件名
public class UUIDUtils { public static String getUUID(){ return UUID.randomUUID().toString().replace("-", ""); } }
以上就是图片上传的主要代码，能够完成所有文件上传。
但是，如果前端想访问上传的文件，例如前端要获取上传的文件用于预览，就涉及到跨域问题。需要配置静态资源映射，主要是一个自定义的配置类，代码如下：
@Configuration public class MyWebConfig implements WebMvcConfigurer { /* * 静态资源本地映射 * img是虚拟路径 * 映射到本地D盘upload下 * 浏览器访问:localhost:8080/img/xxx文件 * */ public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/img/**") //访问的虚拟路径 .addResourceLocations("file:D:/upload/") //允许跨域的站点路径 .setCachePeriod(32456789); //在指定毫秒内不用请求 } }
这是我自己写的小demo，如果有什么不对的地方，请多指教(#^.^#)！