mvc框架上传文件配置遇到的坑坑坑

最新推荐文章于 2023-09-02 18:09:48 发布

我用双手改变世界

最新推荐文章于 2023-09-02 18:09:48 发布

阅读量288

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HBQandJAVA/article/details/105532470

本文详细介绍了在Spring MVC框架下配置multipartResolver进行文件上传时可能遇到的问题，强调了pom.xml中依赖的正确添加与验证、IDEA项目编译后文件路径的检查。同时，讲解了前端如何将base64转为File对象并利用FormData传递到后台，以及后台接收文件的处理方式，特别提示了contentType和processData的设置细节。

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

首先需要在spring-mvc.xml配置 multipartResolver,这个不要随意改动

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="maxUploadSize" value="104857600"/>
        <property name="maxInMemorySize" value="40960"/>
        <property name="defaultEncoding" value="UTF-8"/>
    </bean>

然后在pom.xml里加

	  <dependency>
		  <groupId>commons-fileupload</groupId>
		  <artifactId>commons-fileupload</artifactId>
		  <version>1.2.1</version>
	  </dependency>
	  <dependency>
		  <groupId>commons-io</groupId>
		  <artifactId>commons-io</artifactId>
		  <version>2.0.1</version>
	  </dependency>

千万注意，不要以为代码写了，包就能下来，要查看本地是否真的存在，并且要看编译后的对应位置是否有，此处很坑！

我用idea，需要这么操作，把本地项目包放到编译后的位置，

配置就到这里，接下来是代码：

前台点击提交,触发btnTest事件，我获取的图片信息是base64，需要转正文件对象，工具在此

function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
};

然后把file对象同其他数据一同放到ForData里传到后台，需要注意

contentType:false,//告诉jQuery不要去设置请求头
processData:false,//告诉spring不要去处理发送的数据

$("#btnTest").click(function() {
    var data1 = new FormData();
    $(".lookimg img").each(function (i, file) {
        data1.append('file', dataURLtoFile(file.src,"13123.png"));
    });

    var pattern = /0?(13|14|15|18|17)[0-9]{9}/,
            phone = $('#phone').val();
        var chinse = /[\u4e00-\u9fa5]/,
            name = $('#name').val();
        declaration = $('#declaration').val();
        if (pattern.test(phone) == true && chinse.test(name) == true && chinse.test(declaration) == true && pic1 != null || pic1 != "") {
            ;
            $("#btnTest").removeAttr("onclick");
            var name = $("#name").val();
            var declaration = $("#declaration").val();
            var phone = $("#phone").val();



            //调用

            data1.append("name",name);
            data1.append("declaration",declaration);
            data1.append("phone",phone);

            $.ajax({
                url:'../vote/player',
                data:data1,
                type:"post",
                contentType:false,
                processData: false,
                success:function(result){
                    alert("报名成功");
                    console.log();
                    window.location.href = 	"../vote/activity";
                },
                error:function(result){
                    alert("报名失败");
                }
            })
        }else{
            alert("格式填写不正确");
        }
})

后台接收：其他数据正常接收，文件需要处理一下

处理file,多文件用getFiles,单个用getFile

ok!