element-ui upload 圖片格式驗證 ，文件驗證

1、

accept="image/jpeg,image/jpg,image/png" 瀏覽到文件夾內你會發現它會過濾掉其他格式的圖片只剩這個幾個格式的圖片

驗證規則

handleAvatarSuccess(res, file) {
      this.formInline.logFile = file.raw
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg'
      var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type)
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!testmsg) {
        this.$message.error('上傳圖片格式不對!')
        return
      }
      if (!isLt5M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB!')
      }
      return testmsg && isLt5M
    }

第二種校驗

<el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :on-change="uploadChange">
              <img
                v-if="imageUrl"
                :src="imageUrl"
                class="avatar">
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon" />
</el-upload>

 

uploadChange(file) {
      this.addInfoForm.files.push(file)
      this.imgChanged = true
      // 圖片顯示前做一下判斷
      const IMG_ALLOWD = ['jpeg', 'jpg', 'gif', 'png']
      const imgType = file.raw.type.split('/')[1]
      const imgSize = file.size / 1024 / 1024
      // 判斷圖片格式
      if (IMG_ALLOWD.indexOf(imgType) === -1) {
        this.$message.warning('上傳圖片格式錯誤')
        this.imageUrl = null
      } else if (imgSize >= 400) {
        // 判斷圖片大小
        this.$message.warning('圖片大小大於5M')
        this.imageUrl = null
      } else {
        // 成功
        this.file = file.raw
        this.imageUrl = URL.createObjectURL(this.file)
      }
    }