©2020-2024 ioDraw All rights reserved,
Privacy Policy
上源码
<el-upload ref="uploadExcel" action="你上传的服务器地址" :limit="limitNum" :auto-upload=
"true" accept=".xlsx" :before-upload="beforeUploadFile" :on-change="fileChange"
:on-exceed="exceedFile" :on-success="handleSuccess" :on-error="handleError"
:file-list="fileList" :data="QQQ" > <el-button size="small" plain>选择文件</
el-button> <div slot="tip" class="el-upload__tip"> 只能上传xlsx(Excel2007)文件，且不超过10M
</div> </el-upload>
参数解析：
limit 可上传文件数量
auto-upload 是否可自动上传
accept 可上传的文件格式
before-upload 上传文件之前的钩子
on-change 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
on-exceed 文件超出个数限制时的钩子
on-success 文件上传成功时的钩子
on-error 文件上传失败时的钩子
file-list 上传的文件列表
data 上传时附带的额外参数
data() { return { limitNum: 1, fileList: [] }
钩子函数
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传 beforeUploadFile(
file) { // console.log(file) const extension = file.name.substring(file.name.
lastIndexOf('.') + 1) const size = file.size / 1024 / 1024 if (extension !==
'xlsx') { this.$notify.warning({ title: '警告', message: `只能上传Excel（即后缀是.xlsx）的文件`
}) } if (size > 10) { this.$notify.warning({ title: '警告', message: `文件大小不得超过10M`
}) } }, // 文件状态改变时的钩子 fileChange(file, fileList) { // console.log(file) //
console.log(fileList) }, // 文件超出个数限制时的钩子 exceedFile(files, fileList) { this.
$notify.warning({ title: '警告', message: `只能选择 ${ this.limitNum } 个文件，当前共选择了 ${
files.length + fileList.length} 个` }) }, // 文件上传成功时的钩子 handleSuccess(res, file,
fileList) { console.log(res) // this.formData.url = res.data //服务器返回的文件地址 this.
$message({ message: '文件上传成功', type: 'success' }) this.$refs.uploadExcel.
clearFiles()// 清楚上次上传记录 }, // 文件上传失败时的钩子 handleError(err, file, fileList) { this
.$message.error(err.msg) },
this.$refs.uploadExcel.clearFiles() 虽不眼，其作用不可小觑，此处“uploadExcel”，即是 此处
ref=“uploadExcel”
综上所述：上传文件到服务器，基本剧终。
<>番外：
若你不想自动上传， 来个button喽
<el-button type="primary" @click="uploadClick">确 定</el-button> uploadClick() {
this.$refs.uploadExcel.submit() }
如有不妥，欢迎指正！