多文件上传List＜MultipartFile＞+＜el-upload＞-带参数

若依前后端分离版本中的多文件上传记录。记下本文章原因只有一个，看到网上不是只有前端代码就是只有后端代码，就不能有个全乎一点的，索性自己写了记录一下。

前端代码（封成了一个子组件的形式）

<template>
  <el-form ref="uploadform" size="small" :inline="true">
    <el-upload
      class="upload-demo"
      ref="upload"
      action="#"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :on-change="filechange"
      :file-list="fileList"
      :show-file-list="true"
      :before-upload="beforeAvatarUpload"
      :on-success="uploadsuccess"
      :on-error="uploaderror"
      :limit="uploadexceed"
      :on-exceed="handleExceed"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary" @click="updisabled = false">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" :disabled="updisabled" @click="submitUpload">上传</el-button>
      <el-button size="small" @click="closedeal">关闭</el-button>
      <div slot="tip" class="el-upload__tip">{{uploaddesc}}</div>
    </el-upload>
  </el-form>
</template>
<script>

import {filesUp} from "@/api/sjcj/common";

export default {
  name:'uploadpart',
  props:{
    uploaddesc:{
      type:String,
      required:false
    },
    uploadurl:{
      type:String,
      required:true
    },
    uploadexceed:{
      type:Number,
      required: false,
      default:1
    }
  },
  data(){
    return{
      updisabled:false,
      fileList: [],
    }
  },
  methods:{
    /*弹框关闭处理*/
    closedeal(){
      this.$emit('uploaddeal')
    },
    /*文件上传前判断处理*/
    beforeAvatarUpload(file){
      if(file.type != 'text/plain'){
        this.$modal.msgWarning('只支持txt文件上传！')
        return false;
      }
    },
    /*最多可上传的文件数*/
    handleExceed(files, fileList) {
      this.$modal.msgWarning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    /*上传失败*/
    uploaderror(err, file, fileList){
      this.updisabled = false;
      this.$modal.msgError('上传过程中存在失败文件！具体信息请查看错误列表！')
    },
    /*判断是否上传成功*/
    uploadsuccess(response, file, fileList){
      this.updisabled = false;
      this.$modal.msgSuccess('文件全部上传成功！')
    },
    /*上传提交*/
    submitUpload() {
      this.updisabled = true;
      // this.$refs.upload.submit();
      let formData = new FormData();
      this.fileList.forEach(file =>{
        formData.append("files",file.raw)
      })
      formData.append("uploadurl",this.uploadurl)
      filesUp(formData).then(response => {
        console.log(res)
      }).catch(err =>{
        this.updisabled = false;
      })
    },
    /*文件变化*/
    filechange(file, fileList){
      this.fileList = fileList;
    },
    /*删除处理*/
    handleRemove(file, fileList) {
      // console.log('文件删除',file, fileList);
    },
    handlePreview(file) {
      // console.log('点击文件',file);
    },
  }
}
</script>
<style>

</style>

后端代码

package com.sjcj.controller;

import com.ruoyi.common.core.domain.AjaxResult;
import com.sjcj.config.ScConfigParams;
import com.sjcj.domain.DownLoadParams;
import com.sjcj.utils.SujCaijUtils;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/fileupdown")
public class FileUpDownController {
    @Autowired
    private SujCaijUtils sujCaijUtils;

    @Autowired
    private ScConfigParams scConfigParams;

    @PostMapping("/download")
    public void download(HttpServletResponse response, DownLoadParams downLoadParams)
            throws Exception
    {

        Map<String, Map<String,String>> urlgroup = scConfigParams.getUrlgroup();
        String resource = urlgroup.get("downloadurl").get("productedcheckurl");
        if(resource!=null&&!"".equals(resource)){
            sujCaijUtils.downLoadFilesSc(resource,response);
        }else{
            throw new Exception("模板参数productedcheckurl未配置，请联系管理员！");
        }
    }


    /**
     *
     * @param files 上传文件
     * @param uploadurl 上传地址
     * @return
     * @throws Exception
     */
    @ApiOperation(value = "多文件上传")
    @ApiImplicitParam(name = "files",value = "文件",dataType = "MultipartFile",allowMultiple = true)
    @PostMapping("/upload")
    public AjaxResult uploadBatch(@RequestParam("files") List<MultipartFile> files,@RequestParam("uploadurl") String uploadurl) throws Exception
    {
        if (files.size()>0)
        {
            AjaxResult ajax = AjaxResult.success();
            //自己的处理步骤
            
            ajax.put("", "");
            return ajax;
        }
        return AjaxResult.error("上传文件异常，请联系管理员");
    }
}