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
    }
复制代码

 

posted @   吴小明-  阅读(2591)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结
历史上的今天:
2021-01-25 vscode文件名颜色含义与右侧字母含义
点击右上角即可分享
微信分享提示