Vue+Axios+lrz.js实现微信端图片压缩上传

"基于vue+axios+lrz.js微信端图片压缩上传方法" 在开发微信端的Vue项目时，图片上传是一项常见的需求。本方法主要针对以下四个业务场景：单张图片上传（如个人头像、实名认证）、多张图片上传（如工单记录）、按指定尺寸压缩图片以及支持从相册选择或直接拍照上传。在实现这些功能时，开发者可能会遇到一些挑战，例如微信JSSDK的限制和Android版微信的兼容性问题。 首先，尝试使用微信JSSDK的`wx.chooseImage`接口进行图片上传。然而，JSSDK并不支持直接指定压缩尺寸，只能在服务器端通过`localId`处理图片大小。此外，微信JSSDK的权限验证在单页应用中会有特定问题，尤其是在iOS设备上可能出现`config fail`的情况，这通常与路由模式（hash或history）有关。为了解决这个问题，需要对微信JSSDK的配置和权限验证有深入理解。 由于考虑到网页可能需要在微信以外的浏览器上运行，因此放弃纯微信JSSDK的上传方式。转而使用lrz.js，这是一个前端图片压缩库，可以实现在前端按指定尺寸压缩图片，从而满足了业务需求的第三点。 接下来是Android版微信的一个常见问题，即`input`元素的`onchange`事件在选择图片后不触发。这是因为微信内置浏览器对`accept`属性的特殊处理。解决办法是将`accept`属性设置为`image/*`，允许所有类型的图片，并使用`@change`监听器捕获文件选择事件。如果只需要拍照功能，可以添加`capture="camera"`属性，但需要注意某些机型在拍照后可能返回主页，这可能是由于其他因素导致的问题，需要进一步调试。 在Vue项目中，结合axios库可以方便地发送带有压缩图片的HTTP请求。通常，我们需要先使用lrz.js对图片进行压缩，然后将压缩后的Base64字符串转换为`FormData`对象，最后使用axios的`POST`方法上传至服务器。示例代码如下： ```javascript import axios from 'axios'; import lrz from 'lrz'; // 压缩图片 const result = await lrz(file, { width: 800 }); // 压缩到800px宽度 if (result.errno === 0) { const formData = new FormData(); formData.append('file', result.file.base64, 'compressed.jpg'); // 发送请求 axios.post('/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('图片上传成功:', response.data); }).catch(error => { console.error('图片上传失败:', error); }); } else { console.error('图片压缩失败:', result.errmsg); } ``` 在这个过程中，我们需要注意图片的质量和大小之间的平衡，以确保用户在上传高质量图片的同时，不会导致网络传输负担过重。同时，对于服务器端，需要适配接收`FormData`类型的数据，并处理上传的图片。 基于vue+axios+lrz.js的微信端图片压缩上传方法，不仅解决了微信JSSDK的局限，还确保了在不同平台上的兼容性和用户体验。通过前端压缩图片，可以更好地控制图片质量和上传速度，为用户提供了流畅的图片上传体验。