Vue 图片压缩并上传至服务器功能

  图片压缩工具类
  最大高度和最大宽度都为 500，如果超出大小将等比例缩放。
 
  注意可能出现压缩后比原图更大的情况，在调用的地方自己判断大小并决定上传压缩前或压缩后的图到服务器。
 /
// 将base64转换为blob
export function convertBase64UrlToBlob(urlData) {
 let arr = urlData.split(',')
 let mime = arr[0].match(/:(.?);/)[1]
 let bstr = atob(arr[1])
 let n = bstr.length
 let u8arr = new Uint8Array(n)
 while (n--) {
  u8arr[n] = bstr.charCodeAt(n)
 }
 return new Blob([u8arr], {type: mime})
}

// 压缩图片
export function pressImage(path) {
 //最大高度
 const maxHeight = 500;
 //最大宽度
 const maxWidth = 500;
 return new Promise((resolve, reject) => {
  let img = new Image();
  img.src = path;
  img.onload = function () {
   const originHeight = img.height;
   const originWidth = img.width;
   let pressedWidth = img.height;
   let pressedHeight = img.width;
   if ((originWidth > maxWidth) && (originHeight > maxHeight)) {
    // 更宽更高，
    if ((originHeight / originWidth) > (maxHeight / maxWidth)) {
     // 更加严重的高窄型，确定最大高，压缩宽度
     pressedHeight = maxHeight
     pressedWidth = maxHeight  (originWidth / originHeight)
    } else {
     //更加严重的矮宽型, 确定最大宽，压缩高度
     pressedWidth = maxWidth
     pressedHeight = maxWidth  (originHeight / originWidth)
    }
   } else if (originWidth > maxWidth && originHeight <= maxHeight) {
    // 更宽，但比较矮，以maxWidth作为基准
    pressedWidth = maxWidth
    pressedHeight = maxWidth  (originHeight / originWidth)
   } else if (originWidth <= maxWidth && originHeight > maxHeight) {
    // 比较窄，但很高，取maxHight为基准
    pressedHeight = maxHeight
    pressedWidth = maxHeight  (originWidth / originHeight)
   } else {
    // 符合宽高限制，不做压缩
   }
   // 生成canvas
   let canvas = document.createElement('canvas');
   let context = canvas.getContext('2d');
   canvas.height = pressedHeight;
   canvas.width = pressedWidth;
   context.clearRect(0, 0, pressedWidth, pressedHeight);
   context.drawImage(img, 0, 0, pressedWidth, pressedHeight);
   let base64 = canvas.toDataURL('image/', 0.8);
   let blob = convertBase64UrlToBlob(base64);
   // 回调函数返回blob的值。也可根据自己的需求返回base64的值
   resolve(blob)
  }
 })
}

<template>
 <div>
  <van-uploader v-model="fileList" :after-read="afterRead" />
 </div>
</template>
<script>
 import {pressImage} from '../../utils/CompressImageUtils'
 export default {
  ponents: {},
  methods: {
   //读取完图片后
   afterRead(file) {
    console.log('afterRead------', file);
    this._pressAndUploadFile(file);
   },
   //压缩图片上传
   _pressAndUploadFile(file) {
    pressImage(file.content).then(result => {
     console.log('压缩后的结果', result); // result即为压缩后的结果
     console.log('压缩前大小', file.file.size);
     console.log('压缩后大小', result.size);
     if (result.size > file.file.size){
      console.log('上传原图');
      //压缩后比原来更大，则将原图上传
      this._uploadFile(file.file, file.file.name);
     } else {
      //压缩后比原来小，上传压缩后的
      console.log('上传压缩图');
      this._uploadFile(result, file.file.name)
     }
    })
   },
   //上传图片
   _uploadFile(file, filename) {
    let params = new FormData();
    params.append("file", file, filename);
    this.$api.uploadImage(params).then(res => {
     console.log('uploadImage', res);
   //上传成功，写自己的逻辑
    }).catch(err => {
     console.log('err', err);
    });
   }, 
  }
 }
</script>

//上传图片
 uploadImage(params){
  return axios.post(`${base}/api/v1/file`, params, {
   headers: {'content-type': 'multipart/form-data'}
  })
 },