<el-upload
class="upload-demo"
action="#"
multiple
:show-file-list="false"
:limit="3"
:on-change="handleChange"
>
<el-button size="small" type="primary">点击上传文件</el-button>
</el-upload>
// 文件状态改变时
handleChange(file) {
// 结构获取文件名
let { name } = file
// 正则校验文件格式
let result = /^.zip|.rar|.word|.excel|.ppt|.pdf|.png$/.test(
// 截取文件名后缀 例:.zip
// 注解:
// substring() 截取字符串中介于两个指定下标之间的字符
// toLowerCase() 将字符串转换为小写
// lastIndexOf(".") 返回一个指定的字符串值最后出现的位置
name.substring(name.lastIndexOf(".")).toLowerCase()
)
if(!result) {
this.$message.error('上传文件格式不符合要求')
return
}
}
Vue 使用 ElementUi el-upload 手动上传文件限制上传文件类型
于 2024-07-25 18:52:10 首次发布