AJAX上传图片失败，前端显示Status Code:400 Bad Request

12312312312wwqeqw 2017-02-13 10:22:34

springboot由1.2.1升级为1.3.3产生的全新问题，AJAX上传图片老是400，Status Code:400 Bad Request

前端代码：



<div class="upload_img_pop" style="display: none;">

   <div class="upload_head">选择合适的图片上传</div>

   <div class="upload_body">

   		<div class='clearbox' style="vertical-align:middle;">

   			<img alt="" src="/img/common/select_img.png" id="upload_img" style="cursor:pointer;float:left;">

			<span class="" style='display:inline-block;line-height:47px;float:left;'>上传图片格式为 <span>jpg、png</span>格式,图片不得大于<span class="fileMax"></span>MB</span>

   		</div>

		<div class="canvas"></div> 

		<input type="file" id="uploadImgLinkage" style="display:none;" accept="image/jpeg,image/png"/>

		<input type="hidden" id="fileId">

   </div>

   <div class="upload_footer clearfix" style="width:80%;">

		<a class="btn_close confirm_btn imgHidden">取消</a>

		<a class="btn_close confirm_btn imgConfirm">确认</a>

   </div>

</div>

<script type="text/javascript">

	$(document).ready(function () {

		$("#upload_img").click(function(){

			$("#uploadImgLinkage").click();

		});

		

		$("#uploadImgLinkage").change(function(){

			var r = null;

			if(window.XMLHttpRequest){

				r = new XMLHttpRequest();

			}else if(window.ActiveXObject){

				r = new ActiveXObject("Microsoft.XMLHttp");

			};

			

			/*******************************************回调函数*******************************************/

			r.onreadystatechange = function(){

				if(r.readyState == 4){

					$("#uploadImgLinkage").val("");

			    	/*--------------------------1,状态码 200 执行成功--------------------------*/

			    	if(r.status == 200){

			    		var results = r.responseText;

			    		$(".canvas").empty();

			    		var result = eval("("+results+")");

			        	if(result.success == true){

			        		$(".canvas").append('<img id="targetImg" src="' + result.imgUrl+""+'"/>');

						}else{

							alert( (result.code == null ? "" : result.code) + "  " + result.msg);

						}

			    	}else{

			    		alert("上传失败,请重新尝试!图片最大只能上传" + $("#maxFile").val() + "MB!");	

			    	};

			    };

			}

			r.open("post", "/upload/image" , true);

			

			var data = new FormData();

			data.append("imgUpload" , selectId('uploadImgLinkage').files[0]);

			data.append("uploadTable" , $("#imgTable").val());

			r.send(data);

		});

		

		//上传图片弹出框

		$(".upload_img").click(function(){

			//获取 fileId

			$("#fileId").val($(this).attr("fileId"));

			

			$(".fileMax").text($("#maxFile").val());

			

			//清空图片栏

			$(".canvas").empty();

			$(".upload_img_pop").show();

		});

		

		//弹出框-取消

		$(".imgHidden").click(function(){

			$(".upload_img_pop").hide();

		});

		

		//确定-保存图片

		$(".imgConfirm").click(function(){

			$(".uploadfy_img_" + $("#fileId").val()).attr("src" , $("#targetImg").attr("src"));

			

			//隐藏弹出框

			$(".upload_img_pop").hide();

		});

	});

	

	function selectId(id){return document.getElementById(id);};

</script>

后台代码：



@Controller

@RequestMapping("/upload/")

public class UploadImageController {

	@RequestMapping(value = "image" , method = {RequestMethod.POST , RequestMethod.GET})

	@ResponseBody

	public Map<String,Object> doUploadImage(@RequestParam("imgUpload") MultipartFile file ,

			@RequestParam(value = "uploadTable" , required = false)String uploadTable ){

		Map<String,Object> result = new HashMap<String,Object>();

		try {

			//上传图片

			String name = this.aliyunUtils.uploadFile(file, uploadTable+"/"+NameUtils.getDisposeUUID() + "." + ImageTypeUtils.getExtName(file.getOriginalFilename()));

			this.uploadServiceCRU.doSaveImg(name, uploadTable);

			result.put("success", true);

			result.put("imgUrl", constantIP.getImgIp() + name);

		} catch (Exception e) {

			logger.error(e.getMessage(),e);

			result.put("success", false);

			result.put("code", "500");

			result.put("mgs", "图片存储失败,请重新尝试");

		}

		return result;

	}

}

为了解决此问题，我特意将原生ajax换成了jQuery，此时显示的错误是



- 触发请求:[/upload/image]时系统出现异常，异常类型：系统异常，异常信息：The current request is not a multipart request

10:07:45.557 [http-nio-30161-exec-5] ERROR c.u.y.w.e.h.SystemExceptionHandler:52 - org.springframework.web.multipart.MultipartException: The current request is not a multipart request

	at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.assertIsMultipartRequest(RequestParamMethodArgumentResolver.java:216)

	at org.springframework.web.method.annotation.RequestParamMethodArgumentResolver.resolveName(RequestParamMethodArgumentResolver.java:167)

	at org.springframework.web.method.annotation.AbstractNamedValueMethodArgumentResolver.resolveArgument(AbstractNamedValueMethodArgumentResolver.java:90)

	at org.springframework.web.method.support.HandlerMethodArgumentResolverComposite.resolveArgument(HandlerMethodArgumentResolverComposite.java:99)

	at org.springframework.web.method.support.InvocableHandlerMethod.getMethodArgumentValues(InvocableHandlerMethod.java:161)

	at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.jav

我用了Postman模拟发送请求的时候，上传的file显示为空，所以我确定是后台的接口出了问题，而不是前端。

而我Springboot1.2.1的时候上传功能是正常的，现在没法用了，我怀疑是jar包不兼容或者是jar包版本出了问题。
现在贴出jar包图片，求大神指导

...全文

3110 22 打赏收藏转发到动态举报

写回复

用AI写文章

22 条回复

切换为时间正序

请发表友善的回复…

发表回复

hzryzjss 2017-03-09

打赏
举报

@RequestParam("uploadImgLinkage") MultipartFile file 这样的话会400吗

12312312312wwqeqw 2017-02-21

打赏
举报

没有人在来指导下吗？

12312312312wwqeqw 2017-02-14

打赏
举报

引用 7 楼 xiaopy_0508 的回复:

从你的日志来看，（1）ContentType 必须设置为 multipart/ 开头的（通常是multipart/form-data）。其实是因为在APP请求的时候明明使用的multipart/form-data，但是却始终通不过，尝试用浏览器OK。（2）在保证（1）的情况，如果还是这个错误，那么通过上面的分析，其实也很好解决，怎么解决？　　spring在处理入参的时候，不是遇到MultipartFile相关就会先去校验么，OK，利用这个，那么咱们可以改写入参（直接接收原生的http request），然后自己手动去校验啊对吧，这不就绕过了。当绕过这一步之后，springmvc会通过之前分析的代码，对收到的请求进行校验转换，最终也会得到MultipartHttpServletRequest。修改如下：
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public ResultView upload(HttpServletRequest request) ｛
    if (request instanceof MultipartHttpServletRequest) {
        // process
    }
｝
从上面2种方法入手，应该能找出问题所在

这个该怎么写呢？

12312312312wwqeqw 2017-02-14

打赏
举报

引用 7 楼 xiaopy_0508 的回复:

从你的日志来看，（1）ContentType 必须设置为 multipart/ 开头的（通常是multipart/form-data）。其实是因为在APP请求的时候明明使用的multipart/form-data，但是却始终通不过，尝试用浏览器OK。（2）在保证（1）的情况，如果还是这个错误，那么通过上面的分析，其实也很好解决，怎么解决？　　spring在处理入参的时候，不是遇到MultipartFile相关就会先去校验么，OK，利用这个，那么咱们可以改写入参（直接接收原生的http request），然后自己手动去校验啊对吧，这不就绕过了。当绕过这一步之后，springmvc会通过之前分析的代码，对收到的请求进行校验转换，最终也会得到MultipartHttpServletRequest。修改如下：
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public ResultView upload(HttpServletRequest request) ｛
    if (request instanceof MultipartHttpServletRequest) {
        // process
    }
｝
从上面2种方法入手，应该能找出问题所在

我按照你这个方法，果然状态发生了改变，我给你我看我修改的后台代码，前端的代码确实没有问题


@Controller
@RequestMapping("/upload/")
public class UploadImageController {
	@RequestMapping(value = "image", method = { RequestMethod.POST })
	@ResponseBody
	public Map<String, Object> doUploadImage(HttpServletRequest request) {
		Map<String, Object> result = new HashMap<String, Object>();
		if (request instanceof MultipartHttpServletRequest) {
			try {
				MultipartFile file = (MultipartFile) ((MultipartHttpServletRequest) request).getFiles("imgUpload");
				System.out.println(file);
				String uploadTable = request.getParameter("uploadTable");
				System.out.println(uploadTable);
				// 上传图片
				String name = this.aliyunUtils.uploadFile(file, uploadTable + "/" + NameUtils.getDisposeUUID() + "."
						+ ImageTypeUtils.getExtName(file.getOriginalFilename()));
				this.uploadServiceCRU.doSaveImg(name, uploadTable);
				result.put("success", true);
				result.put("imgUrl", constantIP.getImgIp() + name);
			} catch (Exception e) {
				logger.error(e.getMessage(), e);
				result.put("success", false);
				result.put("code", "500");
				result.put("mgs", "图片存储失败,请重新尝试");
			}
			return result;
		}
		return result;
	}
}

然后报错


11:12:07.589 [http-nio-30161-exec-1] DEBUG o.s.b.c.w.OrderedRequestContextFilter:114 - Bound request context to thread: org.apache.catalina.connector.RequestFacade@3b0650f0
11:12:07.608 [http-nio-30161-exec-1] DEBUG o.s.b.a.e.mvc.EndpointHandlerMapping:301 - Looking up handler method for path /upload/image
11:12:07.611 [http-nio-30161-exec-1] DEBUG o.s.b.a.e.mvc.EndpointHandlerMapping:311 - Did not find handler method for [/upload/image]
11:12:07.622 [http-nio-30161-exec-1] ERROR c.u.y.w.c.u.UploadImageController:87 - java.util.Collections$EmptyList cannot be cast to org.springframework.web.multipart.MultipartFile
java.lang.ClassCastException: java.util.Collections$EmptyList cannot be cast to org.springframework.web.multipart.MultipartFile
	at com.utouu.ym.web.controller.upload.UploadImageController.doUploadImage(UploadImageController.java:76)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
	at java.lang.reflect.Method.invoke(Method.java:601)
	at org.springframework.web.method.support.InvocableHandlerMethod.doInvoke(InvocableHandlerMethod.java:221)
	at org.springframework.web.method.support.InvocableHandlerMethod.invokeForRequest(InvocableHandlerMethod.java:136)
	at org.springframework.web.servlet.mvc.method.annotation.ServletInvocableHandlerMethod.invokeAndHandle(ServletInvocableHandlerMethod.java:110)
	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.invokeHandlerMethod(RequestMappingHandlerAdapter.java:817)
	at org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter.handleInternal(RequestMappingHandlerAdapter.java:731)
	at org.springframework.web.servlet.mvc.method.AbstractHandlerMethodAdapter.handle(AbstractHandlerMethodAdapter.java:85)
	at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:959)
	at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:893)
	at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:968)
	at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:870)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:648)
	at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:844)
	at javax.servlet.http.HttpServlet.service(HttpServlet.java:729)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:292)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.boot.actuate.autoconfigure.EndpointWebMvcAutoConfiguration$ApplicationContextHeaderFilter.doFilterInternal(EndpointWebMvcAutoConfiguration.java:237)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.boot.actuate.trace.WebRequestTraceFilter.doFilterInternal(WebRequestTraceFilter.java:112)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.web.filter.RequestContextFilter.doFilterInternal(RequestContextFilter.java:99)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.web.filter.HttpPutFormContentFilter.doFilterInternal(HttpPutFormContentFilter.java:87)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:77)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:121)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.springframework.boot.actuate.autoconfigure.MetricsFilter.doFilterInternal(MetricsFilter.java:103)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:240)
	at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:207)
	at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:212)
	at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:106)
	at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:502)
	at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:141)
	at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:79)
	at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:88)
	at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:522)
	at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1095)
	at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:672)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1500)
	at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.run(NioEndpoint.java:1456)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1145)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:615)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.lang.Thread.run(Thread.java:722)
 DEBUG o.s.b.c.w.OrderedRequestContextFilter:104 - Cleared thread-bound request context: org.apache.catalina.connector.RequestFacade@3b0650f0

我看了一应该是


MultipartFile file = (MultipartFile) ((MultipartHttpServletRequest) request).getFiles("imgUpload");

这写的有问题，可是request.getParameter返回的是String啊，我需要一个MultipartFile。

12312312312wwqeqw 2017-02-14

打赏
举报

引用 19 楼 m2200 的回复:

400应该传递的参数格式有问题，看是不是把dom对象当参数传递了

不太会，请指教

爱睡觉的阿狸 2017-02-14

打赏
举报

400应该传递的参数格式有问题，看是不是把dom对象当参数传递了

x业精于勤x 2017-02-14

打赏
举报

给你贴下我的项目代码吧

x业精于勤x 2017-02-14

打赏
举报

springboot我不知道怎么配置，但是这个MultipartFile类是springmvc封装的类是需要加入以下配置的，不知道你有加上以下配置文件没


  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
   <!-- maxUploadSize:文件上传的最大值以byte为单位 -->
   <property name="maxUploadSize" value="1024000"></property>
  </bean>

12312312312wwqeqw 2017-02-14

打赏
举报

引用 14 楼 wjverious 的回复:

表单加上 enctype="multipart/form-data"，后端使用multiFile接收

后台如果用@RequestParam("uploadImgLinkage") MultipartFile file 直接进不去所以现在要

12312312312wwqeqw 2017-02-14

打赏
举报

引用 11 楼 xiaopy_0508 的回复:

你的form表单中有没有加上属性 enctype="multipart/form-data"

现在就是可以进后台，就是request那不到值..

wjverious 2017-02-14

打赏
举报

表单加上 enctype="multipart/form-data"，后端使用multiFile接收

12312312312wwqeqw 2017-02-14

打赏
举报

12312312312wwqeqw 2017-02-14

打赏
举报

引用 11 楼 xiaopy_0508 的回复:

你的form表单中有没有加上属性 enctype="multipart/form-data"

我前端没改，用的还是我原来的可是我的requuest貌似取不出来值

x业精于勤x 2017-02-14

打赏
举报

你的form表单中有没有加上属性 enctype="multipart/form-data"

12312312312wwqeqw 2017-02-13

打赏
举报

没有老哥稳一个吗？

12312312312wwqeqw 2017-02-13

打赏
举报

这是一个很难的问题，有没有人帮忙解答

12312312312wwqeqw 2017-02-13

打赏
举报

引用 2 楼 Q80470101 的回复:

你这打码的方式很有趣

额.....这不是重点。。。。

家里敷泥呀 2017-02-13

打赏
举报

你这打码的方式很有趣

12312312312wwqeqw 2017-02-13

打赏
举报

没人能看懂这个吗？

12312312312wwqeqw 2017-02-13

打赏
举报

引用 7 楼 xiaopy_0508 的回复:

从你的日志来看，（1）ContentType 必须设置为 multipart/ 开头的（通常是multipart/form-data）。其实是因为在APP请求的时候明明使用的multipart/form-data，但是却始终通不过，尝试用浏览器OK。（2）在保证（1）的情况，如果还是这个错误，那么通过上面的分析，其实也很好解决，怎么解决？　　spring在处理入参的时候，不是遇到MultipartFile相关就会先去校验么，OK，利用这个，那么咱们可以改写入参（直接接收原生的http request），然后自己手动去校验啊对吧，这不就绕过了。当绕过这一步之后，springmvc会通过之前分析的代码，对收到的请求进行校验转换，最终也会得到MultipartHttpServletRequest。修改如下：
@RequestMapping(value = "/upload", method = RequestMethod.POST)
public ResultView upload(HttpServletRequest request) ｛
    if (request instanceof MultipartHttpServletRequest) {
        // process
    }
｝
从上面2种方法入手，应该能找出问题所在

谢谢大哥，小弟这就看看到底是什么问题

加载更多回复（2）