项目场景：

在上传图片前，对图片进行压缩处理

解决方案：

1.自己写压缩方法（不推荐）

（1）创建公共类封装压缩方法

compressImg.js:

/* 图片压缩方法-canvas压缩 */
function compressUpload(image, file) {
    let compressData
    let canvas = document.createElement('canvas')
    let ctx = canvas.getContext('2d')
    let { width } = image, { height } = image
    let fileSize = parseFloat(parseInt(file.size)/1024).toFixed(2);
    canvas. width = width
    canvas.height = height
    ctx.fillRect(0, 0, canvas.width, canvas.height)
    ctx.drawImage(image, 0, 0, width, height)
    if(fileSize<=500){
        compressData = canvas.toDataURL(file.type || 'image/jpeg')   //500kb以内默认
    }else if (fileSize>500&&fileSize<=1024){
        compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.8) //500kb-1mb以内压缩0.8
    }else{
        compressData = canvas.toDataURL(file.type || 'image/jpeg', 0.6) //大于1mb的都压缩0.6
    }
    // 因为压缩完成后的图片为base64编码，所以要调用方法进行base64转file文件
    let fileImg = dataURItoFile(compressData,file)
    return fileImg
}

/* base64转File文件 （这里根据需求来转换类型）*/
function dataURItoFile(data,file) {
    let arr = data.split(',')
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    let mime = arr[0].match(/:(.*?);/)[1]
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], file.name, { type: mime });
}

export function beforeUpload(file) {
    return new Promise((resolve, reject) => {
        let image = new Image(),
        let resultFile = '';
        image.src = URL.createObjectURL(file);
        image.onload = () => {
            // 调用方法获取File文件格式
            resultFile = compressUpload(image, file);
            resolve(resultFile)
        }
        image.onerror = () => {
            reject()
        }
    })
}

（2）引用压缩方法：

import { beforeUpload } from "@/public/compressImg";

使用压缩方法，因为该方法为异步执行，所以要用async await 解决异步问题：



特别注意：这个方法对.png格式的图片无效！！！所以推荐使用下面的方法。

2.引入imageConversion安装包，进行压缩

（1）安装image-conversion包：

npm i image-conversion --save

（2）引用：

import * as imageConversion from 'image-conversion';

（3）实现压缩：

function beforeUpload(file){    //此压缩得到Blob对象
    return new Promise((resolve, reject) => {
        let fileSize = parseFloat(parseInt(file.size)/1024).toFixed(2);
        if(fileSize<=500){
            resolve(file);
        }else if(fileSize>500&&fileSize<=1024){
            //自定义压缩250kb，实际有误差，控制在300kb内
            imageConversion.compressAccurately(file, 250).then((res) => {
                resolve(res);
            });
        }else{
            //自定义压缩450kb，实际有误差，控制在500kb内
            imageConversion.compressAccurately(file, 450).then((res) => {
                resolve(res);
            });
        }          
    })
}

（4）使用压缩方法，因为该方法为异步执行，所以要用async await 解决异步问题：

参考：

1.

Vue + Element-ui upload 上传前压缩图片


2.

vue中实现图片压缩 file文件的方法


3.

canvas学习——toDataURL()方法


4.

vue+element-ui upload前端js压缩图片上传