上传图片并压缩

<template>
<div class="avatar-txt">点击修改</div>
<input class="upfile" type="file" style="width: 80px; height: 80px" ref="fileBtn" accept="image/*" @change="onCamera($event)" />
</template>

<script setup>
import { compressImg } from '@/utils/file';
import { uploadFile } from '@/api/base';
//上传文件
const onCamera = (e) => {
//为什么使用if判断，因为当我们第一选择图片后，没有上传图片，又重新选择一张图片，会出现报错
    if (e.target.files[0]) {
        let fileObj = e.target.files[0];
        if (fileObj.size > 10 * 1024 * 1024) {
            proxy.$modal.msgWarning('暂不支持上传10M以上的文件！');
            return;
        }
        //压缩图片
        compressImg(fileObj, 0.2).then((res) => {
            sendFile(res.file);
        });
    }
};
const sendFile = (file) => {
    var formData = new FormData();
    formData.append('file', file);
    formData.append('type', '0');
    uploadFile(formData)
        .then((res) => {
            if (res.code == 0) {
                let avatarImg = res.data.url;
                forms.value.avatar = avatarImg;
            }
        })
        .catch((e) => {
            console.log('出错了', e);
        });
};
<script>

在utils文件下，新建一个file文件，代码如下

// 文件相关处理函数
/**
 * 图片压缩方法
 * @param {string} file 文件
 * @param {Number} quality  0~1之间
 * 当quality在0.2~0.5之间，图片质量变化并不大，quality的值越小，压缩效率越可观（也就是在0.2左右时，压缩图片可以最大化，同时并不对图片质量造成太大影响）
 */
//1. 定义了一个压缩图片的函数 `compressImg`
export function compressImg(file, quality) {
    //如果是数组转化成对象
    if (file[0]) {
        return Promise.all(Array.from(file).map((e) => compressImg(e, quality))); // 如果是 file 数组返回 Promise 数组
    } else {
//2. 创建了一个 Promise 对象，将压缩后的图片信息作为 Promise 的返回值。
        return new Promise((resolve) => {
            const reader = new FileReader(); //3. 创建了一个 FileReader 对象 `reader`，用于读取文件数据。
            //4. 通过 `reader.onload` 事件回调函数，当文件加载完成后触发。
            reader.onload = ({ target: { result: src } }) => {
                const image = new Image(); // 5. 在回调函数中，创建了一个 Image 对象 `image`，用于加载图片。
                //6. 使用 `image.onload` 事件回调函数，在图片加载完成后触发。
                image.onload = async () => {
                    const canvas = document.createElement('canvas'); // 7. 在 `image.onload` 回调函数中，创建了一个 Canvas 对象 `canvas`，用于绘制图像。
                    canvas.width = image.width;
                    canvas.height = image.height;
                    canvas.getContext('2d').drawImage(image, 0, 0, image.width, image.height); // 8. 根据给定的最大宽高，通过计算缩放后的宽高，将图片等比例缩放到合适的尺寸，设置了 `canvas` 的宽度和高度，并使用 `drawImage` 方法将原图绘制在 `canvas` 上。
  //使用 `canvas.toDataURL()` 将 `canvas` 中的图像转换为 base64 编码的DataURL格式的图像数据，并指定图片格式为 `image/jpeg`，质量为 `quality`。                    
                    const canvasURL = canvas.toDataURL('image/jpeg', quality);
                    const buffer = atob(canvasURL.split(',')[1]);
                    let length = buffer.length;
                    //10. 将 base64 编码的数据URL 转为二进制数据，并创建一个 Uint8Array 对象 `bufferArray`。
                    const bufferArray = new Uint8Array(new ArrayBuffer(length));
                   //11. 使用循环将 base64 编码的数据填充到 `bufferArray` 中。
                    while (length--) {
                        bufferArray[length] = buffer.charCodeAt(length);
                    }
                   //12. 创建一个新的 File 对象 `miniFile`，将 `bufferArray` 作为文件内容，文件名与原文件一致，文件类型为 `image/jpeg`
                    const miniFile = new File([bufferArray], file.name, {
                        type: 'image/jpeg'
                    });
//13. 将压缩前后的图片信息以对象的形式返回，并调用 `resolve` 方法将该对象作为 Promise 的结果。
                    resolve({
                        file: miniFile,
                        origin: file,
                        beforeSrc: src,
                        afterSrc: canvasURL,
                        beforeKB: Number((file.size / 1024).toFixed(2)),
                        afterKB: Number((miniFile.size / 1024).toFixed(2))
                    });
                };
//14. 在成功的回调中创建一个新的img对象，并将newFile.afterSrc赋给其src属性，这样就能在页面上显示压缩后的图像。此时对压缩后的newFile上传即可。
                image.src = src;
            };
            reader.readAsDataURL(file);
        });
    }
}