导入
<el-upload
ref="upload"
:limit="limitNum"
:auto-upload="false"
accept=".xlsx"
:action="UploadUrl()"
:before-upload="beforeUploadFile"
:on-change="fileChange"
:on-exceed="exceedFile"
:on-success="handleSuccess"
:on-error="handleError"
:file-list="editAddForm.annexList"
drag
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">
<el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
</div>
<div slot="tip" class="el-upload__tip" style="color:red">提示:仅允许导入“xls”或“xlsx”格式文件!</div>
</el-upload>
// 文件超出个数限制时的钩子
exceedFile(files, fileList) {
this.$message.warning(`只能选择 ${this.limitNum} 个文件,当前共选择了 ${files.length + fileList.length} 个`)
},
// 文件状态改变时的钩子
fileChange(file, fileList) {
console.log(file, 'file')
console.log(file.raw, 'raw')
this.editAddForm.annexList.push(file)
},
// 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传
beforeUploadFile(file) {
console.log('before upload')
console.log(file)
const extension = file.name.substring(file.name.lastIndexOf('.') + 1)
const size = file.size / 1024 / 1024
if (extension !== 'xlsx') {
this.$message.warning('只能上传后缀是.xlsx的文件')
}
if (size > 10) {
this.$message.warning('文件大小不得超过10M')
}
},
// 文件上传成功时的钩子
handleSuccess1(res, file, fileList) {
this.$message.success('文件上传成功')
},
// 文件上传失败时的钩子
handleError(err, file, fileList) {
this.$message.error('文件上传失败')
},
UploadUrl: function() {
// 因为action参数是必填项,我们使用二次确认进行文件上传时,直接填上传文件的url会因为没有参数导致api报404,所以这里将action设置为一个返回为空的方法就行,避免抛错
return ''
},
submitFileForm(params) {
if (this.editAddForm.annexList.length === 0) {
this.$message.warning('请上传文件')
} else {
const form = new FormData()
form.append('file', this.editAddForm.annexList[0].raw)
importExcel(this.currentRoomId, form).then(res => {
this.$message.success('导入成功')
this.getPeople(this.currentRoomId)
this.getList()
this.upload.importVisible = false
})
}
},
注意:文件要通过new formdata转换
导出
a.href = `${process.env.VUE_APP_BASE_API}${res.data.templateUrl}`
a.download = res.data.templateName
a.click()