目录
手动上传
选择文件时，限定文件类型
选择文件时，限制文件总数
文件上传前的文件类型和文件大小校验
完整范例代码
手动上传
:auto-upload="false"
this.$refs.upload.submit();
选择文件时，限定文件类型
accept=".xlsx,.xls"
选择文件时，限制文件总数
:limit="1"
超出文件总数时，触发
:on-exceed='limitCheck'
// 选择的文件超出限制的文件总数量时触发limitCheck() {this.$message.warning('每次只能上传一个文件')},
文件上传前的文件类型和文件大小校验
:before-upload="beforeUpload"
// 文件上传前的校验 —— 常见的校验有：校验文件类型，文件大小beforeUpload(file) {// 允许上传的文件格式列表let acceptList = ["xlsx", "xls"]// 根据文件名获取文件的后缀名let fileType = file.name.split('.').pop().toLowerCase()// 判断文件格式是否符合要求if (acceptList.indexOf(fileType) === -1) {this.$message.error('只能上传 xlsx/xls 格式的文件 !');return false}// 判断文件大小是否符合要求if (file.size / 1024 / 1024 > 1) {this.$message.error('上传文件大小不能超过 1M !');return false}}
完整范例代码
<template><div style="padding: 30px"><el-uploadref="upload"accept=".xlsx,.xls":limit="1":on-exceed='limitCheck':file-list="fileList":on-remove="removeFile":on-change="fileChange":auto-upload="false":before-upload="beforeUpload"action="/posts/"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button :disabled="fileList.length<1" style="margin-left: 10px;" size="small" type="success"@click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传 xlsx/xls 文件，且不超过1M</div></el-upload></div></template><script>export default {data() {return {fileList: []}},methods: {// 选择文件、移除文件、上传文件成功/失败后，都会触发fileChange(file, fileList) {this.fileList = fileList},// 移除文件时触发removeFile(file, fileList) {this.fileList = fileList},// 选择的文件超出限制的文件总数量时触发limitCheck() {this.$message.warning('每次只能上传一个文件')},// 点击上传按钮submitUpload() {// 将文件上传到服务器，先触发beforeUpload事件，对上传的文件进行校验，校验通过后才会上传this.$refs.upload.submit();},// 文件上传前的校验 —— 常见的校验有：校验文件类型，文件大小beforeUpload(file) {// 允许上传的文件格式列表let acceptList = ["xlsx", "xls"]// 根据文件名获取文件的后缀名let fileType = file.name.split('.').pop().toLowerCase()// 判断文件格式是否符合要求if (acceptList.indexOf(fileType) === -1) {this.$message.error('只能上传 xlsx/xls 格式的文件 !');return false}// 判断文件大小是否符合要求if (file.size / 1024 / 1024 > 1) {this.$message.error('上传文件大小不能超过 1M !');return false}}},}</script><style scoped></style>
