el-upload自定义上传样式 el-upload上传后回显为表格数据

template

• action 必选参数，上传后台接口地址
• data 上传时附带的额外参数（图片2）
• on-success 上传成功执行函数
• headers 设置上传的请求头部
• multiple 是否支持多选文件,可以不写
• :limit=“3” 最大允许上传个数,可以不写

<div>
  <div class="medical-title">     
      <p  class="card-title">体检报告</p>
      <el-upload
        multiple
        class="upload-demo"
        :action="uploadUrl"
        :data="medicalData"
        :headers="headers"          
        :limit="3"
        :on-exceed="handleExceed"
        :on-success="successMedical"
        :show-file-list="false"
      >
      <p><i class="el-icon-plus" style="color:#407fff"></i>点击上传</p>
      </el-upload>
    </div>   
    <div>
      <el-table :data="fileList" style="width: 80%;margin-bottom:20px">
        <el-table-column prop="name" label="文件名" ></el-table-column>
        <el-table-column prop="uploadingTime" label="上传时间" ></el-table-column>
        <el-table-column >
          <template slot-scope="scope">
            <el-button type="text" @click="downMedical(scope.row)"> 下载</el-button>
            <el-button type="text" style="color:red" @click="removeMedical(scope.row)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>   
  </div>

data数据

 uploadUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
 headers: {
    Authorization: "Bearer " + getToken()
  },
  // 体检报告
  medicalData:{
    type:1,
    source: 1,
  },
  fileList: [],

methodes

 //成功
 successMedical(file,fileList) {
     if(fileList.response.code === 200) {
       this.$message.success('上传成功')
       this.fileList.push(fileList.response.data)
     }
   },
   //删除
   removeMedical(val) {
     const index = this.fileList.findIndex(item => item.url===val.url )
     this.fileList.splice(index,1)
   },
   // on-exceed
   handleExceed(files, fileList) {
     this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
   },

style

.card-title{
  font-weight: 800;
  color: #323333;
}
.medical-title{
  width: 80%;
  display: flex;
  justify-content: space-between;
}