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
    }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM