我们使用三个项目模拟三个服务器，完成图片回显
项目一（项目名：uploadAndCORS）：springboot项目，作为处理上传文件请求
项目二（项目名：uploadAndCORS-Front）：上传文件页面
项目三（项目名：上传文件）：保存文件目录
项目一：springboot项目，处理上传文件请求，并且配置CORS
项目总览
一、编写application.properties配置文件，主要是防止上传文件可能大于1MB因为springboot默认的上传文件最大值为1MB
server.port=8080
spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=100MB
复制二、在主包创建一个config包，在config创建一个MyWebMvcConfig配置类来配置跨域策略。
package com.example.uploadandcors.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class MyWebMVCConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedHeaders("*") .allowedMethods("*") .maxAge(3600) .allowedOrigins("*"); } }
三、在主包创建一个controller包，在controller包创建一个FileController控制器处理文件请求
package com.example.uploadandcors.controller; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.multipart.MultipartFile; import java.io.File; import java.io.IOException; @RestController public class FileController { @PostMapping("/upload") public String uploadFile(@RequestParam(value = "file") MultipartFile file) { if (file.isEmpty()) { return "请选择文件上传"; } try { String url = "C:\\Users\\Administrator\\Desktop\\上传文件\\img\\"; File uploadFile = new File(url + file.getOriginalFilename()); file.transferTo(uploadFile); //这里的地址要注意是保存服务器运行起来的网络地址 return "http://127.0.0.1:5500/img/" + file.getOriginalFilename(); } catch (IOException e) { e.printStackTrace(); } return "上次失败"; } }
项目二：上传文件页面
项目总览
一、将jquery的js文件导入进js目录，编写upload.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上传图片，并将图片展示</title> <script src="js/jquery-3.6.0.min.js"></script> </head> <body> <input id="inputFile" type="file" name="file" value="请选择文件"> <button id="uploadBtn">点击上传</button> <img id="uploadImg" src="http://127.0.0.1:5500/img/猫猫.jpg"><br> <script> function uploadFile(){ var formData = new FormData() formData.append("file", document.getElementById("inputFile").files[0]) $.ajax({ type: "post", url: "http://localhost:8080/upload", data: formData, processData: false, contentType: false, cache: false, // dataType: "dataType", success: function (response) { console.log(response); $("#uploadImg").attr("src", response) } }); } $("#uploadBtn").click(function(event){ event.preventDefault(); uploadFile(); return false; }) </script> </body> </html>
项目三：使用前端项目保存文件
项目总览
三个项目都运行起来
以下是随机命名文件名工具类（如需要不限制为图片文件可将判断图片）
package com.example.uploadandcors.util; import java.util.UUID; public class RandomFileNameUtil { public static String generateFileName(String originFileName){ String suffix = originFileName.substring(originFileName.lastIndexOf(".")); String[] imageExtensions = {".jpg", ".jpeg", ".png", ".gif", ".bmp"}; boolean exists = Arrays.asList(imageExtensions).contains(suffix); if (!exists){ return "请上传图片"; } int index = originFileName.lastIndexOf("."); String newName = UUID.randomUUID().toString() + originFileName.substring(index); return newName; } }
