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;
}