web端使用轻量级图像处理工具两个——image-conversion，compressor.js+ 基础的canvas压缩方法

web端使用轻量级图像处理工具image-conversion，compressor.js（image-compressor.js）

推荐文章
提升用户体验：Vue与compressor.js实现高效文件压缩
https://blog.csdn.net/Shids_/article/details/131855886

vue3+elementplus关于el-upload的压缩

先获取图片的宽高，再进行压缩，压缩之后，再进行上传。
1.使用fileReader，读取图片的宽高
2.使用使用canvas，或者image-compressor.js，限制图片的宽度，限制输出的图片类型为jpg

获取图片尺寸的api有哪些

第一个：文心一言-----上传的file，如何获取图片尺寸

当上传一个文件（特别是图片文件）时，你无法直接通过文件对象（File）本身获取其尺寸（宽度和高度），因为File对象仅代表文件本身，并不包含关于文件内容的详细信息（如图片的像素尺寸）。然而，你可以通过创建一个临时的<img>元素，并将文件内容加载到这个<img>元素中，从而间接获取图片的尺寸。

这里是一个如何在浏览器中使用JavaScript和HTML5的FileReader来从上传的文件中获取图片尺寸的例子：

第二个：文心一言 ----img.src = URL.createObjectURL(file) 获取图片尺寸

基础的canvas压缩方法

结合 element -Plus组件库，压缩图片大小，限制图片格式
https://www.cnblogs.com/leng12/p/17935492.html