SpringMVC裁剪并上传图片_springmvc 头像裁剪上传-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45758686/article/details/116423788

本文介绍了SpringMVC中如何实现文件上传，特别是图片上传的处理。前端通过file类型input和Ajax实现图片裁剪并转为base64编码，后端接收到base64字符串后解码并保存到硬盘。此外，配置文件解析器和添加相关依赖确保了文件上传功能的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

SpringMVC上传文件

SpringMVC上传文件很简单，只需要在form表单中使用file类型的input标签，form表单最好使用post请求方式，并且要加上 enctype=“multipart/form-data”，后端使用 MultipartFile 对象接收文件，MultipartFile中最重要的一个方法是getInputStream()方法，方法签名如下

InputStream getInputStream() throws IOException;

这个方法的作用就是获取输入流，通过输入流我们可以很简单地将前端传输过来的文件持久化到硬盘中

SpringMVC上传图片

如果图片不经过任何处理直接上传，那么我们可以使用上传文件的方式上传图片，毕竟图片也是文件，只不过我们在上传图片之前往往要对图片进行相应处理，如裁剪，旋转等操作，那么处理过后的图片如何传输到服务器呢？我们可以将图片在前端裁剪后，转为base64编码，通过ajax传输到服务器端，使用字符串参数进行接收
前端代码仅供参考，请求路径url可根据实际需求更改

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/cropper.css" rel="stylesheet">
    <script src="js/jquery-3.4.1.js"></script>
    <script src="js/cropper.js"></script>
    <style>
        .container {
            margin: 20px auto;
            max-width: 640px;
        }

        img {
            max-width: 100%;
        }

        .cropper-view-box,
        .cropper-face {
            border-radius: 50%;
        }

        #image {
            width: auto;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <form action="/user/updateHeader" method="post" enctype="multipart/form-data">
            上传头像 : <input type="file" id="upImg" name="file"><br>
            <h1>裁剪图片</h1>
            <div id='chooseImg'>
            </div>
            <input type="button" id="button" value="上传">
        </form>
    </div>
    <script>
        var upImg = document.getElementById('upImg');
        //上传选择的文件
        upImg.addEventListener('change', function() {

            var objImage = '';
            objImage = upImg.files[0];
            var reader = new FileReader();
            reader.addEventListener('load', function() {
                var imgUrl = reader.result;
                var imgBox = document.getElementById('chooseImg');

                // 重新选择图片进行裁剪，如果裁剪的模块有内容，进行情况
                if (document.getElementById('image')) {
                    imgBox.innerHTML = '';
                }
                //实现图片预览
                imageObj = document.createElement('img');
                imageObj.setAttribute('id', 'image');
                imageObj.src = imgUrl;
                imgBox.appendChild(imageObj);

                //选择后的图片进行裁剪
                cropperEvent(imageObj);
            });
            if (objImage) {
                reader.readAsDataURL(objImage);
            }
        }, false);

        function getRoundedCanvas(sourceCanvas) {
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');
            var width = sourceCanvas.width;
            var height = sourceCanvas.height;

            canvas.width = width;
            canvas.height = height;
            context.imageSmoothingEnabled = true;
            context.drawImage(sourceCanvas, 0, 0, width, height);
            context.globalCompositeOperation = 'destination-in';
            context.beginPath();
            context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
            context.fill();
            return canvas;
        }

        function cropperEvent(image) {
            var button = document.getElementById('button');
            var result = document.getElementById('result');
            var croppable = false;
            var cropper = new Cropper(image, {
                aspectRatio: 1,
                viewMode: 1,
                ready: function() {
                    croppable = true;
                },
            });
            button.onclick = function() {
                var croppedCanvas;
                var roundedCanvas;
                var roundedImage;

                if (!croppable) {
                    return;
                }

                // Crop
                croppedCanvas = cropper.getCroppedCanvas();

                // Round
                roundedCanvas = getRoundedCanvas(croppedCanvas);

                // Show
                roundedImage = roundedCanvas.toDataURL("image/png");
                upload(roundedImage);
            };
        }

        function upload(base64) {
            $.ajax({
                url : "../user/updateHeader",
                type : "POST",
                data : "base64=" + base64,
                async : true,
                success : function () {
                    alert("上传成功");
                }
            })
        }
    </script>
</body>
</html>

后端控制器接收base64编码的图片，然后解码为字节数组，就可以通过输出流输出到硬盘

@ResponseBody
@RequestMapping(value = "/updateHeader", method = RequestMethod.POST)
public String updateHeader(String base64) {
    String[] base64_ = base64.split(",");
    // 图片保存路径
    String path = "E:\\我的项目\\fileupload\\test.png";
    File f;
    OutputStream out = null;
    try {
        // base64字符在传输过程中 "+"会变成 " "，因此要替换回来
        base64_[1] = base64_[1].replaceAll(" ", "+");
        byte[] bytes = Base64.decode(base64_[1]);
        f = new File(path);
        out = new FileOutputStream(f);
        out.write(bytes);
    } catch (IOException | Base64DecodingException e) {
        e.printStackTrace();
    } finally {
        try {
            if (out != null) {
                out.close();
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    return "SUCCESS";
}

在配置文件中配置文件解析器

<!-- 文件解析 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    <property name="defaultEncoding" value="UTF-8"/>
    <!-- 最大不能超过5MB，默认单位为字节 -->
    <property name="maxUploadSize" value="5000000"/>
</bean>

需要注意的是pom.xml文件中要加入文件上传的jar包

<dependency>
  <groupId>commons-fileupload</groupId>
  <artifactId>commons-fileupload</artifactId>
  <version>1.4</version>
</dependency>

运行效果如下
在这里插入图片描述
上传后