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