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

"这篇文章主要讲解了如何在基于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的一些限制和兼容性问题。这个解决方案不仅适用于微信环境，还能够在其他浏览器中正常工作。