Vue支持多文件上传前端+后端Springboot （详细介绍）

金蕊泛流霞

已于 2022-09-24 14:34:46 修改

阅读量3.5k

点赞数 3

分类专栏： File 文章标签：前端 vue.js javascript java

于 2022-09-22 16:40:38 首次发布

本文链接：https://blog.csdn.net/songyinyi/article/details/126994028

版权

前端vue+后端java支持多文件上传

效果图
Vue部分
后台部分

效果图

在这里插入图片描述
可以上传多个文件

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: