13518219792
这篇文章主要介绍“怎么使用vue+axios+lrz.js实现微信端图片压缩”，在日常操作中，相信很多人在怎么使用vue+axios+lrz.js实现微信端图片压缩问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用vue+axios+lrz.js实现微信端图片压缩”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
成都创新互联2013年开创至今，是专业互联网技术服务公司，拥有项目成都网站建设、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元丹凤做网站,已为上家服务,为丹凤各地企业和个人服务,联系电话:028-86922220
业务场景
微信端项目是基于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事件未被触发。
解决方案, 更改input的 accept属性：
将以上代码更改为:
如果不允许从相册中选择，只能拍照，增加capture="camera"：
(注:如果场景支持从相册选择或拍照，测试发现某些机型拍照后返回到了主页。哈哈，也有可能是其他因素引起的问题，未做深究了)
使用Lrz.js压缩图片
目前手机拍照的图片文件大小一般在3-4M，如果在上传时不做压缩处理会相当浪费流量并且占用服务器的存储空间(期望上传原图的另做讨论)。如果能够在前端压缩处理，那肯定是最理想的方案。而 lrz.js 则提供了前端图片文件的压缩方案，并且可以指定尺寸压缩。实测:3M左右的图片文件，按宽度450px尺寸压缩上传后的文件大小在500kb左右，上传时间2s以内。
其核心源码，如下:
selectImgs () {
let file = this.$refs.file.files[0]
lrz(file, { width: 450, fieldName: 'file' }).then((rst) => {
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://xxx.com/upload')
xhr.onload = () => {
if (xhr.status === 200 || xhr.status === 304) {
// 无论后端抛出何种错误，都会走这里
try {
// 如果后端跑异常,则能解析成功, 否则解析不成功
let resp = JSON.parse(xhr.responseText)
console.log('response: ', resp)
} catch (e) {
this.imageUrl = xhr.responseText
}
}
}
// 添加参数
rst.formData.append('folder', 'wxAvatar') // 保存的文件夹
rst.formData.append('base64', rst.base64)
// 触发上传
xhr.send(rst.formData)
return rst
})
}单个图片上传组件完整代码，如下(注: icon图标使用的是svg-icon组件):
