技术说明:
- 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);这一步必须注释掉。使用如下图说明的工具。