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

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

技术说明:

  • 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();//返回成功,这里是我自定义的格式}
}

如果你只是单独的上传图片,仅仅使用file.transferTo(targetFile);即可。如果是压缩图片之后,在上传,file.transferTo(targetFile);这一步必须注释掉。使用如下图说明的工具。

image

http://www.hskmm.com/?act=detail&tid=30037

相关文章:

  • 2025年10月氧化镁厂家最新推荐排行榜,轻烧氧化镁,重烧氧化镁,活性氧化镁,高纯氧化镁公司推荐!
  • 【题解】QOJ 8351 [IOI 2022 中国国家队集训@南京 Day 2] Ruin the legend
  • 2025年10月磨粉机厂家最新推荐排行榜,超细磨粉机,雷蒙磨粉机,立式磨粉机,高效节能磨粉机公司推荐!
  • 2025年10月七水硫酸锌厂家最新推荐排行榜:专业生产与优质服务的行业首选!
  • 2025年10月气柱袋厂家最新推荐排行榜:专业生产与客户口碑双优之选!
  • 2025年10月抖音推广服务商最新权威推荐榜:专业运营与创意内容助力品牌高效增长!
  • 2025年10月防水连接器定做厂家最新推荐榜单,专业定制与卓越品质信赖之选!
  • 2025年10月浇注型聚氨酯厂家最新推荐排行榜,专业生产与市场口碑深度解析!
  • 2025年10月通风天窗厂家最新推荐排行榜,工业/民用通风天窗,屋顶通风天窗,高效节能通风天窗公司推荐!
  • 深入解析:贝叶斯定理入门:用医学测试案例理解先验、后验、似然和证据概率
  • 2025年10月保洁公司最新权威推荐榜:专业服务与客户口碑之选
  • 2025年10月网络营销推广/媒体投放/全案推广/新媒体营销/全媒体推广/推广代运营最新权威推荐榜单
  • 2025年10月安全光栅厂家最新推荐排行榜,超薄/四级/无盲区/红外/光电/小型/冲床/折弯机/机床安全光栅公司推荐
  • Docker Desktop 挂载目录实际位置
  • 2025年10月掘进机厂家最新权威推荐榜单:高效施工与卓越性能的首选品牌!
  • 2025年10月电源适配器厂家最新推荐排行榜,笔记本电源适配器,手机电源适配器,USB电源适配器公司推荐!
  • 2025年10月彩钢瓦保养厂家最新推荐排行榜,防腐彩钢瓦,隔热彩钢瓦,耐候彩钢瓦公司推荐!
  • 【网络安全】二、入门篇:HTTP 协议进阶 ——GET/POST 常用传参手段详解
  • AI元人文构想:基础理论框架解析2025年10月13日
  • 2025年10月南通婚纱照最新权威推荐榜:创意摄影与贴心服务完美结合!
  • 2025年10月安全光栅厂家最新推荐排行榜,超薄/四级/无盲区/红外/光电/小型/冲床/折弯机/机床安全光栅及传感器公司推荐!
  • 2025 年吸塑纸卡厂家推荐榜:吸塑热压/牙刷/电池/玩具/牙刷烫银纸卡厂家,聚焦环保与品质,帮企业精准选对合作伙伴
  • 2025年10月风机盘管定制厂家最新推荐排行榜:专业定制与优质服务口碑之选
  • 2025年10月液压阀块厂家最新推荐排行榜,专业生产与品质保障的首选!
  • 2025年10月风机盘管厂家最新推荐榜单,中央空调风机盘管,商用风机盘管,家用风机盘管,优质供货厂家推荐!
  • 2025年10月微弧氧化厂家最新推荐排行榜,铝合金/镁合金/黑色/钛合金微弧氧化技术加工公司推荐
  • 2025年10月新型农机带制造厂家最新推荐榜单,专业生产与技术创新引领行业前沿!
  • 2025 年打包带厂家推荐榜:PP/PET/铁皮/轻质打包带厂家,聚焦品质与效率,助力企业优化包装方案
  • 2025年10月七水硫酸锌厂家最新推荐排行榜:专业生产与优质服务的行业佼佼者!
  • 2025年10月TAB拉链厂家最新权威推荐榜:品质与创新并重的行业佼佼者!