效果图

前端我是用的是 vue作为js框架 element - ui做UI  

后端是使用的FormData来接收的

这是前端

<el-upload 
                          action="auto"
                          :http-request="uploadSectionFile"
                          list-type="picture-card"
                          :on-preview="handlePictureCardPreview"
                          :on-remove="handleRemove"
                          :file-list="imgData.fileList"
                          class = "contentImgStyle">
                          <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible">
                          <img height="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                        
                        <div class="contentImgTitle">
                            <span> 标题 </span>
                            <el-input
                              style="width: 16rem;"
                              placeholder="请输入标题"
                              v-model="thisTitle"
                              clearable>
                            </el-input>
                        </div>

var vm=new Vue({
          el : '#contenVal',
          data (){
              return {
                  dialogImageUrl: '',
                dialogVisible: false,
                uploadFile : [],
                thisTitle : '',
                imgData : {
                    fileList : [{
                        name : "dape.png",
                        url : "http://syy-vr.com:8084/hyd.png"
                    }]
                }
                
              }
          },
          methods : {
              uploadSectionFile (param) {
                  if(this.thisTitle == ''){
                      this.$message.error("请输入标题");
                      return;
                  }
                  var uploadFileLength = this.uploadFile.length;
                  
                  let fileObj = param.file;

                if (fileObj.type === "image/jpeg") {
                  
                  let file = new File([fileObj], new Date().getTime() + ".jpg", {
                    type: "image/jpeg"
                  });
                   this.uploadFile[uploadFileLength]={ 'title' : this.thisTitle, 'imgFile' : file}
                } else if (fileObj.type === "image/png") {
                  let file  = new File([fileObj], new Date().getTime() + ".png", {
                    type: "image/png"
                  });
                  this.uploadFile[uploadFileLength]={ 'title' : this.thisTitle, 'imgFile' : file}
                } else {
                  this.$message.error("只能上传jpg/png文件");
                  return;
                }
              },
              upload() {
                  for (var int = 0; int < this.uploadFile.length; int++) {
                    var param = new FormData(); // FormData 对象
                    var list = this.uploadFile[int];
                    var file = list.imgFile;
                    var name = list.title;
                    param.append("uploadFile", file); // 文件对象
                    param.append("uploadTitle",  name); // 其他参数
                    axios({
                      method: "post",
                      url: "http://127.0.0.1/SYY/serveClients/insertImg.action",
                      data: param
                    }).then(function name(data) {
                        console.log(data);
                        this.$message({
                          message: '上传成功',
                          type: 'success'
                          });
                      })
                      .catch(error => {
                        this.$message.error("上传失败,请稍后重试");
                      });
                  }
              },
              handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
          }
      });

然后接下来是后端的

    @RequestMapping(value="/insertImg",produces = "application/json;charset=UTF-8")
    public void insertImg(HttpServletRequest request,HttpServletResponse response,
            @RequestParam(value = "uploadFile", required = false)  MultipartFile[]  uploadFiles)
            throws ServletException, IOException {
        Map<String,Object> resultMap=new HashMap <String, Object>(); 
        for(int i=0;i<uploadFiles.length;i++) {//支持上传多文件，所以使用循环
            String fileName = uploadFiles[i].getOriginalFilename ();//获取文件上传的名称 
            String b=request.getParameter("uploadTitle");
            try{ 
                
                String uploadPath="E:\\img\\syy";//上传至服务器目录
                File files=new File(uploadPath,fileName);
                if(!files.exists ()){
                     files.mkdirs ();
                }
                uploadFiles[i].transferTo (files); 
             }catch (Exception e){
                     resultMap.put("uploadFlag",false); 
             } 
           } 
           
            /*response.setCharacterEncoding("UTF-8");
            response.setContentType("text/html;charset=UTF-8");
            try {
                response.getWriter().print(new String("测试"));
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }*/
        
    }