当前位置：首页 > news >正文

springboot图片上传，且同时压缩图片

news 2026/5/28 2:54:57

技术说明：

springboot：2.1.4.RELEASE
jQuery
Ajax
mysql：8.0.32

pom.xml,引入jar包，方便图片压缩。如果你图片不需要压缩，那这个可以不要

 <!--处理图片压缩大小--><dependency><groupId>net.coobird</groupId><artifactId>thumbnailator</artifactId><version>0.4.21</version></dependency>

前端代码如下

<div class="form-group col-md-3"><label>上传合同图片</label><form enctype="multipart/form-data"><input type="file" class="form-control" id="contractPhoto" name="contractPhoto"><p id="message" style="color:red;"> </p></form></div>

注意：form中使用enctype="multipart/form-data"标签，type必须是file

效果如下

···

上传合同图片

···

当我们点击上传图片的时候，会获取表单的数据，然后发送给后端接收，具体的代码详情如下

<script>/*** 图片上传*/$("#contractPhoto").on("change",function(e){const contractPhoto = document.getElementById('contractPhoto');const message = document.getElementById('message');//限制文件大小var fileInput = $('#contractPhoto')[0];var file = fileInput.files[0]; // 获取文件对象if (file) {var fileSize = file.size; // 获取文件大小（字节）var fileSizeMB = fileSize / (1024 * 1024); // 转换为MBif (fileSizeMB > 10) { // 例如，限制为10MB$('#message').html('文件大小不能超过10MB，请重新选择文件。')return false; // 不执行上传}}// 可选：检查文件类型是否为图片const fileType = contractPhoto.files[0].type;if (!fileType.startsWith('image/')) {e.preventDefault();message.textContent = '请上传有效的图片文件';message.style.display = 'block';setTimeout(() => {message.style.display = 'none';}, 3000);return false;}//获取表单数据var formData = new FormData(document.querySelector('form'));$.ajax({type:"post",url:"http://localhost:8081/contract/uploadContractPhoto",xhrFields:{widthCredentials:true},async:false,data:formData,/***必须false才会自动加上正确的Content-Type*/contentType: false,/*** 必须false才会避开jQuery对 formdata 的默认处理* XMLHttpRequest会对 formdata 进行正确的处理*/processData: false,success:function (result) {if(0 === result.code){$("#message").html("图片上传成功");}else{$("#message").html("图片上传失败");}},error:function (result) {alert("未知错误");}})});
</script>

后端接收代码如下

@Controller
@RequestMapping("/contract")
public class ContractController {/*** 上传合同，源文件拓展名称*/private static String newFileName;//因为我上传图片，和提交到数据库不是一步完成的，所以，我这里单独写的字段，目的是获取到文件名，然后单独把文件名保存数据库/*** 上传合同图片* @param* @return*/@RequestMapping("/uploadContractPhoto")@ResponseBodypublic CommonReturnType uploadContractPhoto(@RequestParam(value="contractPhoto") MultipartFile file,HttpSession session) {//注意这里的contractPhoto参数，是前端form表格中的id，如果你不写，那就默认file//1. 登录验证if (session.getAttribute("username")==null){return  CommonReturnType.fail("用户未登陆");}/*** 2. 配置上传路径* 上传图片*///图片上传成功后，将图片的地址写到数据库String filePath = "/www/yuanshengrong/upload";//保存图片的路径，这个是Linux下的// String filePath = "D:\\upload";//保存图片的路径，这个是Windows下的// 创建上传图片目录（如果不存在）File uploadDir = new File(filePath);if (!uploadDir.exists()) {uploadDir.mkdirs();}//3. 生成唯一文件名//获取原始图片的拓展名String originalFilename = file.getOriginalFilename();// System.out.println("文件名称是："+originalFilename);//生成唯一文件名newFileName = UUID.randomUUID()+originalFilename;//把重新生成的文件名，赋值给newFileName ,方便我后边保存到数据库。//封装上传文件位置的全路径File targetFile = new File(filePath,newFileName);//把本地文件上传到封装上传文件位置的全路径try {//保存文件//file.transferTo(targetFile);//使用了插件，这一步可以不用，因为插件中自带保存文件功能// 4. 图片压缩处理（核心修改部分）Thumbnails.of(file.getInputStream()).size(1920, 1080)  // 最大尺寸：1280x720像素（保持宽高比）.outputQuality(0.8) // 压缩质量：70%（1.0为原图质量）.toFile(targetFile); // 保存压缩后的图片} catch (IllegalStateException e) {e.printStackTrace();} catch (IOException e) {e.printStackTrace();}return CommonReturnType.success();//返回成功，这里是我自定义的格式}
}