效果图如下：

index.vue：

<el-form ref="importList" :model="importList" label-position="left" label-width="100px"
                   style="width:70%;margin-left:50px;">
  <el-form-item label="系统名称：" prop="sysName">
    <el-input v-model="importList.sysName" :disabled="true" placeholder="" size="mini"
              style="width: 90%"/>
  </el-form-item>
  <el-form-item label="资源名称：" prop="resName">
    <el-input v-model="importList.resName" :disabled="true" placeholder="" size="mini"
              style="width: 90%"/>
  </el-form-item>
  <el-form-item label="资源项名称：" prop="resItemName">
    <el-input v-model="importList.resItemName" :disabled="true" placeholder="" size="mini"
              style="width: 90%"/>
  </el-form-item>
  <el-form-item label="附件：" prop="file">
    <el-upload
      class="upload-demo"
      ref="upload"
      multiple
      action=""
      :on-change="fileChange"
      :on-remove="removeFile"
      :file-list="fjLists"
      :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
  </el-form-item>
</el-form>

methods方法：

//on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
fileChange(file, fileList) {
    
  let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name)//如果文件名重复
  if (existFile) {
    
    this.$message.error('当前文件已经存在!');
    fileList.pop()
  }
},
//on-remove：文件列表移除文件时的钩子
removeFile(file, fileList) {
    
  this.fjLists = fileList//此处fileList为删除文件后，剩余的文件
},
//保存上传
saveFile() {
    
   let {
    uploadFiles} = this.$refs.upload
   this.fileData = new FormData();
   uploadFiles.forEach(item => {
    
     if (item.lastModified) {
    
       this.fileData.append('file', item)
     }
   })
  // 此时所有的钩子已经执行完了fileData 中存的是通过校验的数据
  // 此时再调用接口上传该数据
  let config = {
    
    headers: {
    
      'Content-Type': 'multipart/form-data'
    }
  }
  subFile(this.fileData, config).then(res => {
    
    this.diaFile = false
    //-----可写保存成功后执行的操作，此处省略
    this.fjLists = []//清空
  }).catch((res) => {
    
   //-----可写保存失败后执行的操作，此处省略
    this.diaFile = false
  })
},
//取消
cancelUploadFile() {
    
 this.diaFile = false//关闭弹窗
 this.importList = {
    //清空表单其他项
   sysName: '',//系统名称
   resName: '',//资源名称
   resItemName: '',//资源项名称
   fjFileList: ''//文件名列表
 }
 this.fjLists = []
}

备注：

1.subFile为dataReport.js中定义好的接口方法

export function subFile(data) {
    
  return request({
    
    url: 'api/dataReporting/uploadFile',
    method: 'post',
    data
  })
}
export defalut{
    subFile}

2.功能开发期间参考链接
链接一：该链接中的方法可行，但无法做到只请求一次上传多文件，会请求多次接口；在者，在删除操作时，无法重新调用httpReques方法，将列表中余下的文件保存上传