js图片压缩后上传

 

图片上传，图片大小大于2M进行压缩

handleFileChange (e) {
  const file = e.target.files[0]
  let base64 = ''
  const fileFormData = new FormData()
    // 其余要上传的参数
  for (const key in this.prams) {
    const element = this.prams[key]
    fileFormData.append(key, element)
  }
  var quality = ((1024 * 1024 * 2) / file.size).toFixed(1) // 图像质量
  // 如果大于2M进行压缩
  if (quality < 1) {
    var reader = new FileReader()
    reader.readAsDataURL(file)
    var img = new Image()
    reader.onload = function (e) {
      img.src = e.target.result
      var width = 600 // 图像大小
      var canvas = document.createElement('canvas')
      var drawer = canvas.getContext('2d')
      img.onload = function () {
        canvas.width = width
        canvas.height = width * (img.height / img.width)
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height)
        base64 = canvas.toDataURL('image/png', quality)
      }
    }
    window.setTimeout(() => {
      const imgFile = this.dataURLtoFile(base64)
      fileFormData.append('pic', imgFile)
      this.sendFile(fileFormData)
    }, 500)
  } else {
    fileFormData.append('pic', file, file.name)
    this.sendFile(fileFormData)
  }
},
sendFile (fileFormData) {
  uploadFile(fileFormData).then(res => {
    if (res.data.code === '10000') {
      this.text = res.data.data.url
    }
  }).catch(() => {
    this.$toast.info('网络错误！')
  })
},
dataURLtoFile (dataurl, filename = 'file') {
  const arr = dataurl.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const suffix = mime.split('/')[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, {
    type: mime
  })
}