如何实现基于Vue、Axios和lrz.js的微信端图片压缩及上传功能？

本文共计2100个文字，预计阅读时间需要9分钟。

业务场景+微信端项目是基于Vux+Axios构建的，关于图片上传的业务场景有以下几点需求：

1.单张图片上传（如个人头像、实名认证等业务）

2.多张图片上传（如某类工单记录）

3.上传图片时显示上传中状态

业务场景

微信端项目是基于Vux + Axios构建的，关于图片上传的业务场景有以下几点需求:

1、单张图片上传(如个人头像,实名认证等业务)

2、多张图片上传(如某类工单记录)

3、上传图片时期望能按指定尺寸压缩处理

4、上传图片可以从相册中选择或者直接拍照

遇到的坑

采用微信JSSDK上传图片

在之前开发的项目中(mui + jquery)，有使用过微信JSSDK的接口上传图片，本想应该能快速迁移至此项目。事实证明编程没有简单的事:

1、按指定尺寸压缩图片

JSSDK提供的接口wx.chooseImage 是不能指定图片压缩尺寸的,只能在后端的接口通过localId获取图片时，再转换成指定的尺寸。

2、微信JSSDK的接口权限验证

只要是单页面应用项目，微信JSSDK注入权限验证都会有这个坑，而这个与路由模式(hash 或 history)也有关联。有关此坑， 后续会再次写文总结。参考解决方案[微信JSSDK] 解决SDK注入权限验证 安卓正常，IOS出现config fail

经过权衡考虑网页可能需要在微信以外的浏览器上也能上传文件，顾后来放弃了采用微信JSSDK接口上传图片的方式。

android版微信,input onchange事件不触发

这个坑，圈内有很多人踩过了。在PC端测试是正常的，发布之后，微信端上传时能选择文件，但之后没有任何效果。日志跟踪，后台的api都未调用，由此判断是input的onchange事件未被触发。