1.先上HTML

<el-collapse-item name="1">
  <template slot="title">
    上传附件
    <span style="color: red; margin-left: 10px;">(单个附件最大20M)</span>
  </template>
  <el-form-item label="外机图片">
    <div class="tmp tmp2">
        <base-upload
        :uploadUrl="service.upload"
        :uploadLimit="10"
        :file-list="fileListObj.outSideList"
        name="点击上传"
        listType="text-card"
        :before-upload="beforeAvatarUpload"
        @after-success="f => uploadSuccess(f, 'outSideList')"
        @remove-imgs="f => removeFile(f, 'outSideList')">
        </base-upload>
    </div>
  </el-form-item>
  <el-form-item label="小区环境">
    <div class="tmp tmp2">
        <base-upload
        :uploadUrl="service.upload"
        :uploadLimit="10"
        :file-list="fileListObj.environment"
        name="点击上传"
        listType="text-card"
        :before-upload="beforeAvatarUpload"
        @after-success="f => uploadSuccess(f, 'environment')"
        @remove-imgs="f => removeFile(f, 'environment')">
        </base-upload>
    </div>
  </el-form-item>
</el-collapse-item>

2. upload组件 HTML

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="actualUploadUrl"
      :headers="uploadHeaders"
      :on-preview="handlePreview"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      :on-success="uploadSuccess"
      :data="uploadData"
      multiple
      :limit="uploadLimit"
      :on-exceed="handleExceed"
      :disabled="disabled"
      accept="jpg png"
      :file-list="fileList">
      <div v-if="listType == 'text-card'" slot="file" slot-scope="{file}">
        <ul class="el-upload-list el-upload-list--text">
          <li class="el-upload-list__item is-success">
            <a class="el-upload-list__item-name" style="max-width: 150px;"><i class="el-icon-document"></i>{{file.name}}</a>
            <i class="el-icon-download" @click="handelDownload(file)"></i>
            <label class="el-upload-list__item-status-label">
              <i v-if="file.status === 'success'" :class="'el-icon-upload-success el-icon-circle-check'"></i>
              <i v-if="file.status === 'fail'" :class="'red el-icon-circle-close'"></i>
              <i v-if="file.status === 'error'" :class="'red el-icon-circle-close'"></i>
            </label>
            <i v-if="!disabled" class="el-icon-close" @click="handelRemove(file)"></i>
          </li>
        </ul>
      </div>
      <el-button v-if="listType != 'picture-card'" :disabled="disabled" size="small" type="primary">{{name}}</el-button>
      <slot name='btn'></slot>
    </el-upload>
  </dev>
</template>

3.base-upload组件 JS

<!--
  上传按钮组件
  @uploadUrl: 文件上传路径
  @name: 上传按钮名称
  @uploadLimit: 最大上传数量
  @data: 上传时携带的参数
-->
<script>
export default {
  data () {
    return {
      uploadHeaders: {
        'Access-Token': sessionStorage.getItem('access-token')
      },
      loading: undefined, // 上传交互,
      dialogVisible: false
    }
  },
  props: {
    uploadUrl: String,
    disabled: {
      type: Boolean,
      default: false
    },
    name: String,
    fileList: Array,
    uploadLimit: {
      type: Number
    },
    uploadData: {
      type: Object,
      default () { return {} }
    },
    beforeUpload: Function, // 过滤数据使用
    uploadParam: {
      type: Number
    }, // 当循环出的表单需要每个都有上传功能的时候，区分index用的
  },
  computed: {
    actualUploadUrl () {
      return ‘/api/’ + this.uploadUrl // config.prefix 封装了一层项目路径
    }
  },
  methods: {
    // 文件列表移除文件时的钩子
    function handleRemove (file, fileList) {
      this.$emit('remove-file', file, this.uploadParam)
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview (file) {
      this.$emit('handle-file', file)
    },
    // 文件超出个数限制时的钩子
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 ${this.uploadLimit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length}个文件`)
    },
    // 删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除
    beforeRemove (file, fileList) {
      // return this.$confirm(`确定移除？`)
    },
    uploadSuccess (response, file, fileList) {
      this.$parent.clearValidate()
      this.$emit('after-success', response, file.name, this.uploadParam)
    },
    handelDownload (file) {
      let fileUrl = ''
      if (file.url) {
        fileUrl = file.url
      } else if (file.response) {
        fileUrl = file.response.result.fileUrl
      }
      window.open(fileUrl, '_blank')
    },
    handelRemove (file) {
      this.$confirm(`确定移除？`, '提示', {type: 'warning'}).then(() => {
        this.$emit('remove-imgs', file, file)
      })
    }
  }
}
</script>

4.base-upload组件 css

.el-icon-download {
  position: absolute;
  right: 20px;
  top: 1px;
  line-height: inherit;
}

5.父组件回调js

data () {
  return {
    fileListObj: {
      outSideList: [], // 外机图片
      environment: [], // 小区环境
    },
  }
},
methods: {
    // 上传前校验附件大小，不能超过6MB
    beforeAvatarUpload (file) {
      if (!this.isProposal) {
        return false
      }
      const isLt6M = file.size / 1024 / 1024 < 20
      if (!isLt6M) {
        this.$message.error('上传附件大小不能超过 20MB!')
      }
      return isLt6M
    },
    // 附件上传成功
    uploadSuccess (file, typeName) {
      let fileUrls = JSON.parse(JSON.stringify(this.fileListObj[typeName]))
      fileUrls.push({name: file.result.fileOriginalName, url: file.result.fileUrl})
      this.fileListObj[typeName] = fileUrls
    },
    // 附件上传删除
    removeFile (file, typeName) {
      let fileUrl = ''
      if (file.url) {
        fileUrl = file.url
      } else if (file.response) {
        fileUrl = file.response.result.fileUrl
      }
      const index = this.fileListObj[typeName].findIndex(x => x.url === fileUrl)
      let fileUrls = JSON.parse(JSON.stringify(this.fileListObj[typeName]))
      fileUrls.splice(index, 1)
      this.fileListObj[typeName] = fileUrls
      this.fileListObj[typeName] = JSON.parse(JSON.stringify(fileUrls))
    },
}

如果对你有帮助能否点个赞，工作需要，谢谢朋友！