zoukankan      html  css  js  c++  java
  • 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() 都是表单序列化 但是后者是表单数据序列化 ,有兴趣可以查查研究一下。

    原文链接:https://www.pianshen.com/article/1968284349/

  • 相关阅读:
    BZOJ 2199 [Usaco2011 Jan]奶牛议会
    BZOJ 2621 [Usaco2012 Mar]Cows in a Skyscraper
    BZOJ 2272 [Usaco2011 Feb]Cowlphabet
    BZOJ 2580 [Usaco2012 Jan]Video Game
    BZOJ 2099 [Usaco2010 Dec]Letter 恐吓信
    maxcontent css 采用内部元素宽度值最大的那个元素
    JSON.parse()
    uniapp去除顶部标题样式
    logminer的使用
    tmpfs文件系统
  • 原文地址:https://www.cnblogs.com/jiawen010/p/13452460.html
Copyright © 2011-2022 走看看