vant上传组件通过【before-read】校验大小和格式
<template #input> <van-uploader multiple v-model="item.desc" :before-read="(file)=>beforeRead(file,['jpg','jpeg','png'])" :after-read="(file)=>afterImgRead(file, index)" @delete='handleDeleteFile' max-count='5' upload-text='点击上传' accept=".jpg, .jpeg, .png" /> </template> <template #input> <van-uploader multiple v-model="item.desc" :before-read="(file)=>beforeRead(file,['pdf', 'doc', 'docx', 'xls', 'xlsx'])" :after-read="(file)=>afterFileRead(file, index)" max-count='5' upload-text='点击上传' accept=".pdf, .doc, .docx, .xls, .xlsx" /> </template>
// 上传图片、上传文件校验大小和格式 beforeRead(file, correctFormat) { const isArray = Object.prototype.toString.call(file) === '[object Array]' const isLimit50M = 1024 * 1024 * 50 // 是否大于50M const isImg = correctFormat + '' === ['jpg', 'jpeg', 'png'] + '' if (isArray) { const sizes = file.map(item => item.size) if (sizes.some(item => item > isLimit50M)) { this.$vux.toast.text('大小不能超过50M') return false } const types = file.map( ({ name }) => name.slice(name.lastIndexOf('.') + 1) // 后缀 ) if (!types.every(item => correctFormat.includes(item))) { this.$vux.toast.text( isImg ? '请上传jpg/jpeg/png' : '请上传pdf/word/excel' ) return false } } else { if (file.size > isLimit50M) { this.$vux.toast.text('大小不能超过50M') return false } const type = file.name.slice(file.name.lastIndexOf('.') + 1) if (!correctFormat.includes(type)) { this.$vux.toast.text( isImg ? '请上传jpg/jpeg/png' : '请上传pdf/word/excel' ) return false } } return true }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
2021-01-25 vscode文件名颜色含义与右侧字母含义