formData+MultipartFile进行附件传输报400“Bad Request“

最新推荐文章于 2026-06-21 12:37:45 发布

原创最新推荐文章于 2026-06-21 12:37:45 发布 · 3.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

博客内容讲述了在使用formData和MultipartFile进行文件上传时遇到400错误的情况，问题根源在于前端文件参数名与后台接收的名称不一致。修复方法是将formData中key由'files'改为'file'，确保前后端参数匹配。通过这个案例，读者可以了解到在处理文件上传时需要注意前端与后端参数的一致性。

一、问题：formData+MultipartFile进行附件传输报400错误(error: "Bad Request")，如下：

error: "Bad Request"

错误代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
<div class="infoenter user_form">
	<input id="upfile" type="file" name="upfile" class="upfile" multiple="multiple" value="" onchange="fileUpload()">
</div>

    <script src="jquery-1.7.2.min.js"></script>
    <script>
		function  fileUpload() {
			 var formData = new FormData();
             for(var i=0;i<$("#upfile")[0].files.length;i++){
               formData.append("files",$("#upfile")[0].files[i]);
             }
			 $.ajax({
				type:"post",
				url:"http://localhost/product/uploadProduct",
				data:formData,
				cache:false,//上传文件无需缓存
				processData:false,//用于对data参数进行序列化处理 这里必须false
				contentType:false,//必须
				//dataType:"json",
				success:function(data){
					if(null != data){
						if(data.code == "0"){
							alert("上传成功！pid="+data.pid);
						}else{
							alert("上传失败！code="+data.code);
						}
					}
				},
				error:function(){
					alert("上传失败！");
				}
			 });
        }
    </script>
</body>
</html>

二、解决：经过排查发现是文件参数名和后台不一致引起，修改后正确代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/login.css">
</head>

<body>
<div class="infoenter user_form">
	<input id="upfile" type="file" name="upfile" class="upfile" multiple="multiple" value="" onchange="fileUpload()">
</div>

    <script src="jquery-1.7.2.min.js"></script>
    <script>
		function  fileUpload() {
			 var formData = new FormData();
             for(var i=0;i<$("#upfile")[0].files.length;i++){
               formData.append("file",$("#upfile")[0].files[i]);
             }
			 $.ajax({
				type:"post",
				url:"http://loalhost/product/uploadProduct",
				data:formData,
				cache:false,//上传文件无需缓存
				processData:false,//用于对data参数进行序列化处理 这里必须false
				contentType:false,//必须
				//dataType:"json",
				success:function(data){
					if(null != data){
						if(data.code == "0"){
							alert("上传成功！pid="+data.pid);
						}else{
							alert("上传失败！code="+data.code);
						}
					}
				},
				error:function(){
					alert("上传失败！");
				}
			 });
        }
    </script>
</body>
</html>

注意formData 设置值时key为"file"不是"files"，要与后台保持一致。

参考资料：

MultipartFile实现文件上传功能_Cz范特西的博客-CSDN博客_multipartfile文件上传

formData+MultipartFile进行附件传输_masklxs的博客-CSDN博客_formdata multipartfile

MultipartFile多文件上传（免插件） - 简书

js前端formData技术，后端MultipartFile的单文件多文件上传_xu33wei的博客-CSDN博客_multipartfile formdata files

浅析FormData.append()的使用、FormData对象常用方法、如何使用FormData传文件流传json对象传list数组、如何使用FormData传多个文件、如何打印FormData对象的内容_51CTO博客_FormData对象

Springboot+MultipartFile实现单文件，多文件批量上传。_抹香鲸之海的博客-CSDN博客_multipartfile批量上传