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); // 转换为MB
      if (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")
    @ResponseBody
    public 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);这一步必须注释掉。使用如下图说明的工具。