springboot 前端传blob后端接收转图片保存在磁盘前端使用cropper插件

最新推荐文章于 2025-08-27 15:51:36 发布

原创最新推荐文章于 2025-08-27 15:51:36 发布 · 6.7k 阅读

8 ·

CC 4.0 BY-SA版权

后端同时被 3 个专栏收录

26 篇文章

订阅专栏

框架搭建

20 篇文章

订阅专栏

前端

12 篇文章

订阅专栏

本文介绍如何在SpringBoot应用中处理前端上传的Blob对象，将其转换为图片并保存到磁盘。前端使用了cropper插件进行图片处理，后端通过 ImgPath 类来管理和区分不同的文件路径，FileUploadUtil 类则负责文件的上传操作。

1.前端代码

canvas.toBlob(function (e) {
    console.log(e);  //e->生成的Blob
    var fd = new FormData();
    fd.append("file", e);
    $.ajax({
        url:url,
        dataType:'json',
        type:"POST",
        data: fd,
        processData: false,//必须加
        contentType: false,//必须加
        success:function(data,textStatus) {
            if (!isKickOut(data)) {
                if (data.resultCode == 100) {
                    $("#up-modal-frame").modal("hide");
                } else if (data.resultCode == 101) {
                    showJqueryConfirmWindow("#icon-shangxin1", "上传照片异常！");
                } else {
                    showJqueryConfirmWindow("#icon-tishi1", data.msg);
                }
            }
        },
        error:function(){
            showJqueryConfirmWindow("#icon-tishi1","失败");
        }});
},'image/jpeg');

2.后端代码

@PostMapping(value = "/uploadBlobImg")
@ResponseBody
public Result uploadFileImg(@RequestParam("file")MultipartFile blobFile) {
    Result result = new Result();
    try {
        if(IsEmptyUtils.isEmpty(blobFile)){
            result.setSuccess(false);
            result.setResultCode(IStatusMessage.SystemStatus.PARAMETERS_LOSE.getCode());
            result.setMsg(IStatusMessage.SystemStatus.PARAMETERS_LOSE.getMessage());
        }
        User existUser= (User) SecurityUtils.getSubject().getPrincipal();
        String imgPathStr = IndexController.class.getClassLoader().getResource("json/imgPathData.json").getPath();
        String jobJsonData = JsonUtil.readJsonFile(imgPathStr);
        JSONObject jobJob = JSON.parseObject(jobJsonData);
        ImgPath imgPathData = null;
        if(!IsEmptyUtils.isEmpty(jobJob.get(existUser.getType().toString()))){
            imgPathData = JSON.parseObject(jobJob.get(existUser.getType().toString()).toString(),ImgPath.class);
        }
        String filesPath = new SimpleDateFormat("yyyy/MM/dd/HH/mm/ss")
                .format(new Date());
        String imgName = UUID.randomUUID() + ".png";
        // 生成文件路径
        String imgPath = imgPathData.getLocalPath()+imgPathData.getSinglePath() +"/"+ filesPath;
        File fileDir = new File(imgPath + "\\");
        if (!fileDir.exists()) {
            fileDir.mkdirs();
        }
        String fileNamePath = imgPath+"/"+imgName;

        FileUploadUtil fileUploadUtil = new FileUploadUtil();
        if(fileUploadUtil.uploadBlobImgFile(blobFile,fileNamePath)){
            result.setSuccess(true);
            result.setResult(imgPathData.getImgPath()+imgPathData.getSinglePath()+"/"+filesPath+"/"+imgName);
            result.setResultCode(IStatusMessage.SystemStatus.SUCCESS.getCode());
            result.setMsg(IStatusMessage.SystemStatus.SUCCESS.getMessage());
        }else{
            result.setSuccess(false);
            result.setResultCode(IStatusMessage.SystemStatus.ERROR.getCode());
            result.setMsg(IStatusMessage.SystemStatus.ERROR.getMessage());
        }
    } catch (Exception e) {
        e.printStackTrace();
        logger.error("上传图片！异常！", e);
        result.setSuccess(false);
        result.setResultCode(IStatusMessage.SystemStatus.ERROR.getCode());
        result.setMsg(IStatusMessage.SystemStatus.ERROR.getMessage());
    }
    return result;
}

ImgPath类是用来区分不同点的映射的盘

3.FileUploadUtil类

public boolean uploadBlobImgFile(MultipartFile file, String fileNamePath){
        try {
            OutputStream out = new FileOutputStream(fileNamePath);
            out.write(file.getBytes());
            out.flush();
            out.close();
            return true;
        } catch (IOException e) {
            e.printStackTrace();
            return false;
        }
}