el-upload上传图片之前压缩图片

一、主要代码

<el-upload
     ref="upload1"
     class="avatar-uploader"
     :headers="headers"
     :action="actionUrl"
     :multiple="false"
     :limit="1"
     :show-file-list="false"
     :on-success="businessLicenseSuccess"
     :before-upload="
         file => {
             beforeAvatarUpload('license', file)
         }
     "
     :on-exceed="beforeExceed"
     :file-list="businessLicense"
     :data="data1Name"
 >
     <img
         style="width: 170px; height: 117px; border-radius: 10px"
         v-if="businessLicense.length > 0"
         :src="businessLicenseUrl"
         class="avatar"
     />
     <div class="bgBusiness" v-else>
         <!-- <i class="el-icon-plus avatar-uploader-icon"></i>
         <p>上传证件照</p> -->
     </div>
 </el-upload>

二、before-upload函数中

beforeAvatarUpload(file) {
      // jpg ===image/jpeg
      // png====image/png
      const isJPG = file.type === 'image/jpeg' || 'image/png'
      //  png 、jpg 、jpeg
      const isLt2M = file.size / 1024 > 100
      if (!isJPG) {
          this.$message.error('上传图片只能是jpg/jpeg/png格式!')
          return Promise.reject()
      }
      if (isLt2M) {
          return this.commonZipPic(file)
      }
  },      

// 图片通用压缩提示
commonZipPic(file) {
 const r = confirm(
     `您上传的图片大小约为${(file.size / 1024).toFixed(
         2
     )}Kb,是否进行压缩上传？(此操作会降低图片质量)`
 )
 // const r = true
 if (r == true) {
     const _this = this
     return new Promise((resolve, reject) => {
         const image = new Image()
         let resultBlob = ''
         image.src = URL.createObjectURL(file)
         image.onload = () => {
             // 调用方法获取blob格式，方法写在下边
             resultBlob = _this.compressUpload(image, file)
             const fs = new File([resultBlob], file.name, {
                 type: file.type,
             })
             if (fs.size / 1024 > 100) {
                 // this.commonZipPic(fs)
                 this.$message.warning('压缩后图片仍大于100kb，请您手动压缩')
                 reject()
             }
             resolve(fs)
         }
         image.onerror = () => {
             reject()
         }
     })
 } else {
     return Promise.reject()
 }
},

/* 图片压缩方法-canvas压缩 */
compressUpload(image, file) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    // const initSize = image.src.length
    const { width } = image
    const { height } = image
    canvas.width = width
    canvas.height = height
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(image, 0, 0, width / 10, height / 10)
    // 进行最小压缩0.1
    const compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.1)
    // 压缩后调用方法进行base64转Blob，方法写在下边
    const blobImg = this.dataURItoBlob(compressData)
    return blobImg
},     

/* base64转Blob对象 */
   dataURItoBlob(data) {
       let byteString
       if (data.split(',')[0].indexOf('base64') >= 0) {
           byteString = atob(data.split(',')[1])
       } else {
           byteString = unescape(data.split(',')[1])
       }
       const mimeString = data.split(',')[0].split(':')[1].split(';')[0]
       const ia = new Uint8Array(byteString.length)
       for (let i = 0; i < byteString.length; i += 1) {
           ia[i] = byteString.charCodeAt(i)
       }
       return new Blob([ia], { type: mimeString })
   },

链接: https://blog.csdn.net/weixin_44134899/article/details/95046994