效果图

可以上传多个文件

Vue部分

<template>
  <div>
    <el-form-item label="案例名称" prop="caseName">
      <el-input v-model="formObj.caseName" placeholder="请输入案例名称"/>
    </el-form-item>
    <el-form-item label="适用问题类型" prop="questionType">
      <asp-dict dictCode="question_type" v-model="formObj.questionType"></asp-dict>
    </el-form-item>
    <el-form-item label="审计类型" prop="auditType">
      <asp-dict dictCode="audit_types" v-model="formObj.auditType"></asp-dict>
    </el-form-item>
    <el-form-item label="上传案例文档" prop="fileList">
      <el-upload
        v-model="formObj.fileList"
        name="file"
        :with-credentials="true"
        :action="uploadAction"
        :headers="headers"
        :drag="drag"
        :show-file-list="showFileList"
        :file-list="fileList"
        :disabled="disabled"
        :before-upload="beforeUpload"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :on-preview="handlePreviewDl"
        :on-progress="handleProcess"
        multiple
      >
        <el-button size="small" type="primary">
          点击上传
          <i class="el-icon-upload el-icon--right"/>
        </el-button>
        <div  slot="tip" class="el-upload__tip">支持文件类型:.doc,.docx,.pdf,.jpg,.png,.xls,.xlsx</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="目录选择" prop="parentId">
      <tree-select
        v-model="formObj.caseCatalogueId"
        :options="treeData"
        :normalizer="normalizer"
        :show-count="true"
        placeholder="请选择目录"
      />
    </el-form-item>
  </div>
</template>

<script>
  const uidGenerator = () => {
    return '-' + parseInt(Math.random() * 10000 + 1, 10)
  }
  const FILE_TYPE_ALL = 'all'
  const FILE_TYPE_IMG = 'image'
  const FILE_TYPE_TXT = 'file'

  import { getTreeList } from '@/api/catalogue/catalogueCase'
  // 导入 ASP 平台通用组件包
  import AspDev from '@/utils/aspdev'
  import TreeSelect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  // 解构通用组件
  const {
    AspDict
  } = AspDev
  export default {
    components: {
      AspDict,
      TreeSelect
    },
    name: 'caseForm',
    props: {
      formObj:{},
      text: {
        type: String,
        required: false,
        default: '点击上传'
      },
      prompt: {
        type: [String, Boolean],
        required: false,
        default: ''
      },
      fileType: {
        type: String,
        required: false,
        default: FILE_TYPE_ALL
      },
      fileSuffix: {
        type: String,
        required: false,
        default: ""
      },
      limitSize: {
        type: Number,
        required: false
      },
      /* 这个属性用于控制文件上传的业务路径*/
      bizPath: {
        type: String,
        required: false,
        default: 'temp'
      },
      limit: {
        type: Number,
        required: false
      },
      drag: {
        type: Boolean,
        required: false,
        default: false
      },
      showFileList: {
        type: Boolean,
        required: false,
        default: true
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false
      },
      value: {
        type: [String, Array],
        required: false
      }
    },
    watch: {
      value(val) {
        this.initFileList(val)
      }
    },
    data() {
      return {
        uploadAction: window._CONFIG['BASE_URL'] + '/finance/case/upload', // 上传的文件服务器地址
        downloadAction: window._CONFIG['BASE_URL'] + '/common/download/resource?name=', // 文件下载服务器地址
        headers: {},
        fileList: [],
        treeData: [],
        // 树形对应
        defaultProps: {
          children: 'children',
          label: 'name',
        },
      }
    },
    created() {
      this.initFileList(this.value)
      //获取案例目录树形结构
      getTreeList(this.queryParams).then((response) => {
        this.treeData = response.data
      })
    },
    methods: {
      initFileList(arr) {
        if (!arr || arr.length === 0) {
          this.fileList = []
          return
        }
        var fileList = []
        for (var a = 0; a < arr.length; a++) {
          fileList.push({
            uid: uidGenerator(),
            name: arr[a].fileName,
            status: 'success',
            filePath: arr[a].filePath,
            url: `${this.downloadAction}${encodeURI(arr[a].filePath)}`,
            response: {
              status: 'history',
              url: `${this.downloadAction}${encodeURI(arr[a].filePath)}`
            }
          })
        }
        this.fileList = fileList
      },
      // 限制上传类型
      beforeUpload: function (file) {
        const fileType = file.type;
        const fileSize = file.size / 1024 / 1024;
        const fileSuffix = file.name.replace(/^.*(\.[a-z0-9]+)$/gi, "$1");
        if (fileType === FILE_TYPE_IMG) {
          if (fileType.indexOf('image') < 0) {
            this.msgError('请上传图片')
            return false
          }
        } else if (fileType === FILE_TYPE_TXT) {
          if (fileType.indexOf('image') >= 0) {
            this.msgError('请上传文件')
            return false
          }
        }
        if (this.fileSuffix && this.fileSuffix.indexOf(fileSuffix) < 0) {
          this.msgError('上传文件格式有误')
          return false
        }
        if (fileSize > this.limitSize) {
          this.msgError('超出上传大小限制')
          return false
        }
        this.$emit("beforeUpload", file);
        return true
      },
      handleChange(file, fileList) {
        if (file.status === 'success') {
          this.msgSuccess(`${file.name} 上传成功!`)
          fileList = fileList.map(file => {
            if (file.response && file.response.status !== 'history') {
              file.url = `${this.downloadAction}${encodeURI(file.response.filePath)}`
              file.filePath = file.response.filePath
              //TODO 这里处理为 接口返回地址 择以接口地址为准
              if(file.response.url) {
                file.url = file.response.url;
              }
            }
            return file
          })
        } else if (file.status === 'fail') {
          this.msgError(`${file.name} 上传失败.`)
        } else if (file.status === 'removed') {
          this.handleRemove(file)
        }
        this.fileList = fileList
        if (file.status === 'success') {
          this.handlePathChange()
        }
      },
      // 触发双向数据绑定数据
      handlePathChange() {
        const uploadFiles = this.fileList
        var arr = []
        if (!uploadFiles || uploadFiles.length === 0) {
          arr = []
        }
        if (this.limit === 1) {
          arr.push({
            filePath: uploadFiles[uploadFiles.length - 1].filePath,
            name: uploadFiles[uploadFiles.length - 1].name,
            fileUrl: uploadFiles[uploadFiles.length - 1].url,
          })
        } else {
          for (var a = 0; a < uploadFiles.length; a++) {
            arr.push({
              filePath: uploadFiles[a].filePath,
              name: uploadFiles[a].name,
              fileUrl: uploadFiles[a].url,
            })
          }
        }
        this.formObj.fileList=arr
        this.$emit('change', arr)
      },
      // 删除文件时
      handleRemove(file, fileList) {
        this.deleteFile(file.filePath)
          .then(() => {
            this.fileList = fileList
            this.handlePathChange()
            this.msgSuccess('文件删除成功')
          })
          .catch(() => {
            this.msgError('文件删除失败')
          })
      },
      handlePreviewDl(file) {
        this.download(file.filePath, true, file.name)
      },
      handleProcess(event, file, fileList) {
        this.$emit('process', {
          event, file, fileList
        });
      },
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.caseCatalogueId,
          label: node.name,
          children: node.children,
        }
      },
      //回显文件
      echoFile(fileList){
        this.fileList=fileList
      },
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/styles/table37.scss';
</style>

里面最主要的方法我认为是handleChange这方法，这个方法请求后台接口返回后台的响应值；uploadAction 去填写后台文件上传的接口请求；handlePathChange这个方法去给他触发双向数据绑定数据 最终拿到arr数组，然后我们吧这个数组赋值给我们的**v-model=“formObj.fileList”**然后去提交给后台统一保存 ；echoFile这个方法是为了每次打开新增清空和回显文件 这里我是这样调用的触发 的

/** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.$nextTick(() => {
          this.$refs['formUpdate'].echoFile([])
        })
        const caseId = row.caseId || this.ids
        getCase(caseId).then(res => {
          this.form = res.data
          const queryData = res.data
          const addRouterTem = this.addRouter
          this.$nextTick(() => {
            this.$refs['formUpdate'].echoFile(res.data.fileList)
          })
          if (this.needTagsView) {
            this.open = true
            this.title = '修改案例'
          } else {
            this.$router.push(
              {
                'path': addRouterTem,
                'query': { formObj: queryData }
              }
            )
          }
        })
      },

后台部分

这里用MultipartFile[] file 数组去接收多个文件

/**
     * 通用上传请求
     */
    @PostMapping("/upload")
    public AjaxResult uploadFile(MultipartFile[] file) throws Exception
    {
        AjaxResult ajax = AjaxResult.success();
        try
        {
            for (MultipartFile f : file) {
                // 上传文件路径
                String filePath = AspDevConfig.getUploadPath();//配置文件yml文件填写的路径
                // 上传并返回新文件名称
                String fileName = FileUploadUtils.upload(filePath, f);
                String url = serverConfig.getUrl() + fileName;//页面访问的全路径
                ajax.put("name", f.getName());
                ajax.put("filePath", fileName);
                ajax.put("url", url);
            }
            return ajax;
        }
        catch (Exception e)
        {
            return AjaxResult.error(e.getMessage());
        }
    }

批量上传多个文件我建议用两个表，一个用主表，一个用来存放文件详细的
在新增的时候互不影响存个主表id就行

 /**
     * 新增案例
     *
     * @param tCase 案例
     * @return 结果
     */
    @Override
    @Transactional(readOnly = false)
    public int insertTCase(TCase tCase) {
        String uuid = UUID.randomUUID().toString();
        tCase.setCreateBy(UserInfoUtil.getUserInfo().getUserID());
        tCase.setCreateTime(DateUtils.getNowDate());
        if (StringUtils.isEmpty(tCase.getCaseId())) {
            tCase.setCaseId(uuid);
        }
        List<TCaseFile> fileList = tCase.getFileList();
        fileList.forEach(t->{
            t.setCaseId(uuid);
            t.setFileId(UUID.randomUUID().toString());
            t.setCreateBy(UserInfoUtil.getUserInfo().getUserID());
            t.setCreateTime(DateUtils.getNowDate());
            tCaseFileMapper.insertTCaseFile(t);
        });
        return tCaseMapper.insertTCase(tCase);
    }

在修改文件的时候我采用的是把所有文件删除，然后在统一在添加上

/**
     * 修改案例
     *
     * @param tCase 案例
     * @return 结果
     */
    @Override
    @Transactional(readOnly = false)
    public int updateTCase(TCase tCase) {
        tCase.setUpdateBy(UserInfoUtil.getUserInfo().getUserID());
        tCase.setUpdateTime(DateUtils.getNowDate());
        //更新之前全部删除文件详细
        tCaseFileMapper.deleteTCaseFileById(tCase.getCaseId());
        List<TCaseFile> fileList = tCase.getFileList();
        fileList.forEach(t->{
            t.setCaseId(tCase.getCaseId());
            t.setFileId(UUID.randomUUID().toString());
            t.setCreateBy(UserInfoUtil.getUserInfo().getUserID());
            t.setCreateTime(DateUtils.getNowDate());
            tCaseFileMapper.insertTCaseFile(t);
        });
        return tCaseMapper.updateTCase(tCase);
    }

基本上就是这么多步骤