Vue+Vant 实现移动端图片压缩与上传：工具类封装

本文主要介绍了如何在Vue项目中实现图片的压缩与上传功能，结合Vant库，该功能针对移动端设备，重点在于利用HTML5的Canvas API进行图片压缩处理。首先，文章提供了一个名为`CompressImageUtils`的工具类，这个类包含了两个核心方法：`convertBase64UrlToBlob`和`compressImage`。 1. **图片压缩函数 (`compressImage`)**： - 函数接受一个图片路径（通常是用户选择的图片URL）作为输入。 - 定义了最大高度(`maxHeight`)和最大宽度(`maxWidth`)为500像素，如果原始图片尺寸超过这些限制，会进行等比例压缩。 - 使用`Image`对象加载图片，当图片加载完成时，计算原始的高度(`originHeight`)和宽度(`originWidth`)。 - 如果原始图片过宽或过高，会根据压缩比调整压缩后的宽度(`compressedWidth`)和高度(`compressedHeight`)。 - 返回一个Promise，当压缩完成后，`resolve`函数会返回压缩后的图片数据，这可以用于后续上传到服务器。 2. **Base64到Blob转换函数 (`convertBase64UrlToBlob`)**： - 接收一个Base64编码的图片URL，首先解析出MIME类型和二进制数据。 - 使用`atob`函数解码Base64字符串，然后将其转换成Uint8Array数组。 - 最后，创建一个新的Blob对象，包含解码后的数据和MIME类型，这是上传到服务器前常见的数据格式。 在实际应用中，开发者可以按照以下步骤使用这个工具类： - 用户通过Vant库选择图片，获取到Base64格式的图片数据。 - 调用`convertBase64UrlToBlob`函数将Base64数据转换为Blob对象。 - 使用`compressImage`函数对Blob对象中的图片进行压缩。 - 在压缩后的图片满足服务器上传要求时，将其发送到服务器，或者根据需要在本地存储或展示。 在整个过程中，需要注意的是，压缩可能会导致图片质量下降，因此需要根据具体需求权衡压缩比例，以确保用户体验和上传效率。此外，为了保证兼容性和性能，应避免在主线程上进行过多的图片处理操作，可考虑使用Web Workers进行异步处理。