"这篇文章主要讲解了如何在基于Vue.js的微信端应用中实现图片压缩上传功能，使用的技术栈包括Vue.js、axios以及lrz.js。文章指出，开发过程中遇到了微信JSSDK上传图片的限制以及Android版微信input onchange事件不触发的问题，并提供了相应的解决方案。"
在开发基于Vue.js的微信端项目时，图片上传是一项常见的需求，通常涉及单张和多张图片上传，并且可能需要在上传前进行压缩以满足特定尺寸要求。本文将详细阐述如何利用vue、axios和lrz.js库来实现这一功能。
1. **图片压缩上传流程**
- 使用lrz.js库，该库可以方便地在前端对图片进行压缩。首先，需要引入lrz.js到项目中，然后在图片选择后调用lrz()函数进行压缩操作。
- 压缩完成后，lrz.js会返回一个包含base64编码的图片数据，可以直接通过axios发送到服务器。
- 在axios配置中，设置正确的Content-Type（通常为'application/x-www-form-urlencoded'或'multipart/form-data'），并将压缩后的图片数据作为请求体发送。
2. **微信JSSDK的挑战**
- **图片尺寸压缩**：微信JSSDK的`wx.chooseImage`接口不支持直接指定压缩尺寸，需要在后端处理，这增加了服务器的压力。
- **权限验证问题**：在单页面应用中，微信JSSDK的权限验证可能因路由模式导致问题，特别是在iOS设备上。
3. **Android微信input onchange事件不触发**
- 当在Android版微信中使用`<input type="file">`选择图片时，onchange事件可能不会触发。这是由于微信内核对文件选择的限制。
- 解决方案是将`accept`属性从特定的图片类型（如'image/jpeg,image/png'）改为通用类型`image/*`，这样可以确保所有图片类型都被接受。
- 如果只想允许用户通过相机拍照上传，可以添加`capture="camera"`属性。
4. **使用Vue.js和axios**
- Vue.js提供了一种声明式的数据绑定和组件化机制，使得代码结构清晰，易于维护。
- axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用，非常适合用于处理异步的HTTP请求，如上传图片。
5. **代码示例**
- 在Vue组件中，可以创建一个方法来处理图片选择和压缩：
```javascript
methods: {
selectImgs(e) {
let files = e.target.files;
lrz(files[0], { width: 800 }).then(result => {
// 发送axios请求
this.$axios.post('/upload', { imgBase64: result.base64 });
}).catch(err => console.log(err));
}
}
```
- 这里的`selectImgs`方法在`<input type="file" @change="selectImgs">`触发时执行，lrz处理文件，然后通过axios上传压缩后的图片。
结合Vue.js、axios和lrz.js，可以有效地在微信端实现图片压缩上传功能，同时避免微信JSSDK的一些限制和兼容性问题。这个解决方案不仅适用于微信环境，还能够在其他浏览器中正常工作。
我的内容管理
展开
