SpringBoot：layui表单文件上传

http://yunzhu.iteye.com/blog/2177923

layui+springboot使用FormData文件上传

HTML代码：

<form class="layui-form layui-form-pane" id="fm" action="" enctype="multipart/form-data">
	  <div class="layui-form-item">
	    <label class="layui-form-label">图片名称</label>
	    <div class="layui-input-inline" style="width:300px;">
	      <input type="text" name="pName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	   <div class="layui-form-item">
		    <label class="layui-form-label">系列</label>
		    <div class="layui-input-block" style="width:300px;">
		      <select name="series.id" lay-filter="series">
		        <option value=""></option>
		        <option value="0">第一系列</option>
		        <option value="1" selected="">第二系列</option>
		        <option value="2">第三系列</option>
		      </select>
		    </div>
		</div>
		<div class="layui-form-item">
		    <label class="layui-form-label">类别</label>
		    <div class="layui-input-block" style="width:300px;">
		      <select name="type.id" lay-filter="type">
		        <option value=""></option>
		        <option value="0">类别1</option>
		        <option value="1" selected="">金馆长</option>
		        <option value="2">张学友</option>
		      </select>
		    </div>
		</div>
	  <div class="layui-form-item">
	   <label class="layui-form-label">图片上传</label>
		    <div class="layui-input-block" style="width:300px;">
		    	<input type="file" id="imageFile" name="imageFile" />
		    </div>
		 <!--
	  	 <div class="layui-upload">
			  <button type="button" class="layui-btn layui-btn-normal" id="choosePhoto">选择图片</button>
			  
			 <img class="layui-upload-img" id="photoPre" style="width:200px;height:200px;">
			    <p id="demoText"></p> -->
			  
	 </div>  
	  
	  <div class="layui-form-item">
		    <div class="layui-input-block" style="width:300px;">
		      <button class="layui-btn" lay-submit="" lay-filter="photoSave">立即提交</button>
		      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		    </div>
	  </div>
	</form>	

一定要注意enctype="multipart/form-data"声明，这里没有使用到layui中的文件上传，因为这里涉及到其他表单字段，用layui模块不是很方便。

表单提交代码：

form.on('submit(photoSave)', function(data){
		 // console.log(data.field) 
		 //parent.layer.msg("2");
		 var formData = new FormData($( "#fm" )[0]);  
		 console.info(formData);
		 var saveLoading = parent.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
		 $.ajax({
                url : '/admin/photo/save',
                type : 'post',
                async: false,
                data : formData,
                cache:false,
                contentType: false,  
                processData: false, 
                success : function(data) {
                	parent.layer.close(saveLoading);
                	if(data.code==1){
                		parent.layer.msg("保存成功");
                	}
                }
	  		});
	});

这里使用的是FormData提交表单，表单中有文件上传的时候不能使用普通的ajax上传，这里的带参不能是data.field或者是$( '#表单id').serialize()也不行。

否则会报当前表单没有文件上传错误。

后台代码：

    @ResponseBody
	@RequestMapping("/save")
	public ResultResponse save(Photo photo,@RequestParam("imageFile")MultipartFile file,HttpServletRequest request)throws Exception{
		if(!file.isEmpty()){
			// 获取文件名
			String fileName = file.getOriginalFilename();
			// 获取文件的后缀名
			String suffixName = fileName.substring(fileName.lastIndexOf("."));
			String newFileName=DateUtil.getCurrentDateStr()+suffixName;
			FileUtils.copyInputStreamToFile(file.getInputStream(), new File(imageFilePath+newFileName));
			photo.setpUrl(newFileName);			
		}
        photo.setCreateDate(new Date());
		int result = photoService.save(photo);
		return new ResultResponse(result,"");
	}

另外这里的文件上传的参数@RequestParam("imageFile")不能是表里的参数，否则会报本地临时文件找不到错误。

添加页面：

 

转载于:https://my.oschina.net/qinbao/blog/1544598