Ajax上传文件 Current request is not a multipart request 可能是jquery版本问题
总结:Ajax上传文件 Current request is not a multipart request 可能是jquery版本问题
作为刚上班两周,而且还不是科班出身的小编来说,发现很多基础不牢固,尤其记不住,所有日常问题日常重复解决,决定把问题都整理下来。最近看同事弄一个上传图片功能,感觉很实用,讲过又不会,所以翻箱底找出来想做一个简单版,结果copy完还是出现错误,Current request is not a multipart request。百思不得其解,反复试验解决,做个记录
上传文件
上传文件可以有很多种方法,也可以用插件,比如fileupload等,然而我不会,所以用的学过的form表单提交
首先添加一个form 表单,两个input标签,用ajax把数据传到后台,
这里有坑注意 “processDate” 属性为false,这个属性的意思大概是对数据预进行序列化,是不能的。“contentType”为false 因为浏览器会自动设置消息头为
multipart/form-data; boundary=----WebKitFormBoundaryAumPhHVNWRpEi4ck
如果我们自己设置成"contentType": multipart/form-data ,会报找不到什么什么边界错误,以上为我理解,如有不对请指正。
后台代码
@RestController
@RequestMapping("/file")
public class FileController {
@PostMapping("/upload.do")
public Result uload(@RequestParam("file") MultipartFile file,HttpSession session){
// 检查是否存在上传文件 > file.isEmpty()
if (file.isEmpty()){
// 抛出异常:文件不允许为空
return new Result("请选择一个文件");
}
//自定义的绝对路径
String path = "C:\\Users\\chen\\Desktop\\upload";
//或者用项目的所在路径
// String parentPath = session
// .getServletContext().getRealPath("自己定一个文件夹名");
File parent = new File(path);
if (!parent.exists()) {
parent.mkdirs();
}
// 确定文件名 > getOriginalFileName()
String originalFileName = file.getOriginalFilename();
//截取上传的文件名的后缀类型,比如.jpg
int beginIndex = originalFileName.lastIndexOf(".");
String suffix = originalFileName.substring(beginIndex);
//随机生成一个自己的文件名
String fileName = System.currentTimeMillis() + "" + (new Random().nextInt(90000000) + 10000000) + suffix;
System.err.println(fileName);
// 确定文件
File dest = new File(parent, fileName);
// 执行保存文件
try {
file.transferTo(dest);
System.err.println("上传完成!");
} catch (Exception e) {
// 抛出异常:上传失败
return new Result("上传失败");
}
// 返回
return new Result(200,"上传成功");
按道理到现在应该是没什么问题了,但是当运行时还是出现Current request is not a multipart request 错误。上网查发现自己的form表单添加了enctype=“multipart/form-data” method=“post” ,其他坑也没踩,查看消息头发现
浏览器并没有给我们设置好,网上可不是这么说的啊!再与之前的页面移过来进行实验后比对后我发现了问题所在居然是
这是我们写的
这是原来的
对没错,就是jq的版本不同,我吧版本换成1.9.1之后马上就能用了。
这才是正确的请求头。控制台打桩获取名称及后缀得到
可以看出已经成功,在桌面上也出现了文件夹和图片
理论上这个方法是可以上传任何文件的 好像是转化成的二进制进行进行传送(这块我也不知道…) ,也可以在后台进行大小和格式的判断限制
/**
* 上传文件的最大大小
*/
private static final long FILE_MAX_SIZE = 5 * 1024 * 1024;
/**
* 允许上传的文件类型
*/
private static final List<String> FILE_CONTENT_TYPES
= new ArrayList<>();
/**
* 初始化允许上传的文件类型的集合
*/
static {
FILE_CONTENT_TYPES.add("image/jpeg");
FILE_CONTENT_TYPES.add("image/png");
}
@PostMapping("/upload.do")
public Result uload(@RequestParam("file") MultipartFile file,HttpSession session){
// TODO 检查文件大小 > file.getSize()
if (file.getSize() > FILE_MAX_SIZE) {
// 抛出异常:文件大小超出限制
}
// TODO 检查文件类型 > file.getContentType()
if (!FILE_CONTENT_TYPES.contains(
file.getContentType())) {
// 抛出异常:文件类型限制
}
下面总结一下网上查到的用这种方法和报这个错误的原因
- form表单没有设置 enctype=“multipart/form-data” method=“post”
- ajax的话也设为post方式
- 用ajax的话 要有
- meta http-equiv=“Content-Type” content=“multipart/form-data; charset=utf-8” 这个头
- ajax上面说的两个属性要为 false
- 用百度的ueditor插件 ueditor.all.js和ueditor.all.min.js里面把post请求的Content-Type:multipart/form-data二进制传送方式变成了Content-Type:text/html。
- 据说还有坑是用MultipartFile 需要有
- 这个jar包
- 还有说要这两个依赖
<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.3.1</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.4</version>
</dependency>
还有在spring-mvc.xml 加上一句话
<!-- 设置上传文件最大值 1M=1*1024*1024(B)=1048576 bytes -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1048576" />
</bean>
本人是spring boot框架 在application.properties 里有
# 上传文件总的最大值
spring.servlet.multipart.max-request-size=10MB
# 单个文件的最大值
spring.servlet.multipart.max-file-size=10MB
不过发现删了也能运行 ,也是没搞懂。大体就这些
追加
new FormData() 与 $form.serializeArray() 都是表单序列化 但是后者是表单数据序列化 ,有兴趣可以查查研究一下。