上传文件
手动上传
<el-upload
class="add-upload"
ref="add-upload"
drag
action
multiple
:auto-upload="false"
:file-list="fileList"
:limit="1"
:on-exceed="handleExceed"
:on-change="handleChange"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
<div class="el-upload__tip" slot="tip">
上传文件只能为excel文件,且为xlsx、xls格式
</div>
</el-upload>
// 文件上传数量判断
handleExceed(e) {
this.$message({
type: 'warning',
message: '只能上传一个文件!'
})
},
// 文件格式判断
handleChange(file, fileList) {
if (!/\.(xlsx|xls|XLSX|XLS)$/.test(file.name)) {
this.$message({
type: 'warning',
message: '上传文件只能为excel文件!'
})
this.fileList = []
return false
}
this.file = file.raw // 手动上传需要保存 file.raw
},
// 根据触发条件触发对应请求函数 将 this.file 传入就行
自动上传
<el-upload
ref="upload"
action
drag
:auto-upload="true"
:http-request="fileUpload"
:before-upload="beforeUpload"
:limit="1"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>更新文件
</div>
<div class="el-upload__tip" slot="tip">
上传文件只能为pdf文件
</div>
</el-upload>
fileUpload(file) {
// file 是 element 处理过的 raw 数据,不需要单独保存了
updateFile(this.row.id, file).then(res => {
this.$message({
type: 'success',
message: '上传文件成功!'
})
this.fileList = []
})
}
},
请求设置
function updateFile(id, file) {
let param = new FormData()
// param.append('file', file) // 手动上传
param.append('file', file.file) // 自动上传
return request({
url: `/request/upload-file?id=${id}`,
method: 'post',
headers: { 'Content-Type': 'multipart/form-data' },
data: param
})
}