springmvc+element-ui upload组件实现文件上传

前端代码:

<el-upload               
 class="upload-demo"            
   drag                
   action="http://localhost:8090/day/chat/modifyGroup"                :auto-upload="false"      
 :http-request="uploadFile" //覆盖原有上传模式
  ref="upload" 
 :before-upload="beforeAvatarUpload"                                list-type="picture" >  
 <i class="el-icon-upload"></i> 
 <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过4MB</div>                </el-upload>

js部分:

 beforeAvatarUpload(file){          
 const isLt = file.size / 1024 / 1024 < 4;                    
 if (!isLt) {           
  this.$message.error('上传头像图片大小不能超过 4MB!')           
   return false;          }      
       return true;               },

uploadFile(file){ 
 this.imgsArr.push(file.file);//往一个数组中添加图片数据    
     },    
       upload(){       
     if(this.form.name==null||this.form.name==""){                 this.$message.error("群名不能为空");
      return;             }
    var formdate=new FormData(); 
    this.$refs.upload.submit();
    if(this.imgsArr.length>1){ 
     this.$message.error("只能上传一张头像"); 
      return;            } 
      if(this.imgsArr.length>0){                
      this.imgsArr.forEach((img,index)=>{                 
      formdate.append(`file`,img);       }) 
       }else{              
 formdate.append("file",[]);         
    }            
formdate.append('name',this.form.name);            
formdate.append('desc',this.form.desc);            
formdate.append("RequestType","modify");            
formdate.append("username",localStorage.getItem("username"));            console.log(formdate.get("file"));           
 let config = {                
 headers: {            
     'Content-Type': 'multipart/form-data'                }            }
 //设置请求头!            
 this.$http.post('/chat/createGroup',formdate,config).
 then(inf=>{               
  this.$message.success('添加成功');                
  this.$store.ChatRightFormShow;                
  console.log(inf.data);                            })

后端java部分:

@RequestMapping(value = "/modifyGroup",method = RequestMethod.POST)
public @ResponseBody JSONPObject modifyGroup(@RequestParam("file") MultipartFile file[],
                                             @RequestParam("name") String name,
                                             @RequestParam("desc") String desc,
                                             @RequestParam("id") int id
) throws IOException {
    String path=null;
    if(file.length>0){
        for(int i=0;i<file.length;i++){
            path=new Date().getTime()+file[i].getOriginalFilename();
            file[i].transferTo(new File("D://Aimg//"+path));
        }
    }else {
        System.out.println("为空");
    }
    path=(path==null?null:"http://localhost:8090/img/"+path);
        server2.modifyGroup(name,path,desc,id);
        return new JSONPObject("state",'1');


}