vue element多文件多格式上传文件，后台springmvc完整代码

   template:

       <el-upload

              class="upload-demo"

              ref="upload"

              :action="fileurl()"

              :data="filedata()" 

              :auto-upload="false"

               multiple

              :limit="3"

              :on-exceed="handleExceed"

              :before-upload="beforePd"

              :on-success="fileSuccess"

              :on-error="fileError"

              :file-list="fileList"

              :with-credentials="true"

              accept=".doc,.docx,.png,.jpg,.xls,.xlsx,.pdf,.ppt,.pptx,.txt">

              <el-button slot="trigger" size="small" type="success" plain>选取文件</el-button>

              <div slot="tip" class="el-upload__tip">支持word、excel、pdf、ppt、txt、图片(png、jpg)文件,单文件大小不超过50MB</div>

            </el-upload>

            <el-divider></el-divider>

 

对应函数的方法：

      handleExceed(){

        this.$message.error('超出最大上传限制')

      },

      beforePd(file){

          if(file.size > 1024*1024*50){

            this.$message({

              type:'warning',

              message:'上传文件最大限制50MB'

            })

            return false;

          }else{

            return true;

          } 

      },

      upload(fileList){

        if(this.$refs.upload.$children[0].fileList.length == 0){

          this.$message({

            type:'warning',

            message:'选择文件不能为空'

          })

        }else if(this.ztid == null || this.ztid == "" || this.aremark == null || this.aremark == ""){

            this.$message({

            type:'warning',

            message:'填写内容不能为空'

          })

        }else{

          this.$refs.upload.submit();

        }  

      },

      fileurl(){

        return this.paths.baseURL+'file/addFile'

      },

      fileSuccess(){

        this.$message.success('上传成功')

        this.addStatus = false;

        this.findFile();

      },

      fileError(msg){

        this.$message.error('上传失败')

      },

      filedata(){

      return {ztid:this.ztid,remark:this.aremark,ztname:this.ztname}

      }

 

后台接口：

    @RequestMapping(value = "addFile",method = RequestMethod.POST,produces = {"application/json;charset = utf-8"})
    @ApiOperation(notes = "上传文件",value = "上传文件",httpMethod = "POST",produces = "application/json;charset = utf-8")
    @ApiImplicitParam(name = "参数",value = "map")
//    @RequiresPermissions("file:add")
    public JSONObject addFile( @RequestParam MultipartFile[] file,@RequestParam Map<String,Object> map,HttpServletRequest request) throws IOException {
            if(Integer.parseInt(fileService.countZName(map).get(0).get("count").toString()) > 0){
                return JSONUtil.SUCCESSJson("", CommonEnum.COUNT_CODE, CommonEnum.COUNT_MSG);
            }else{
            map.put("createid",redisTemplate.opsForValue().get("userid_"+request.getSession().getId()));
            map.put("createname",redisTemplate.opsForValue().get("username_"+request.getSession().getId()));
                for(int i = 0;i < file.length;i++){
                    String str = CommonEnum.ZSK_PATH+"/"+file[i].getOriginalFilename().substring(file[i].getOriginalFilename().lastIndexOf(".")+1)+"/"+file[i].getOriginalFilename();
                    map.put("zurl",str);
                    map.put("zname",file[i].getOriginalFilename());
                    File file1 = new File(str);
                    FileUtil.filePath(file1);
                    file[i].transferTo(file1);
                    fileService.addFile(map);
                }
            return JSONUtil.SUCCESSJson("", CommonEnum.SUCCESS_CODE, CommonEnum.SUCCESS_MSG);
        }
    }