最近做的租车的小程序时用到了拍照识别身份证和驾驶证,由于现在手机拍摄的照片文件大小一般来说都是偏大的,所以将图片文件上传到服务器会导致服务器运行负担过大,从而导致用户在查看图片时服务器运行过慢等问题,所以在小程序中上传图片时先将图片进行压缩处理,将压缩处理后的图片上传至服务器,这样就大大提升了图片识别的效率。
1、vant weapp小程序组件
放置vant weapp图片上传组件,详细使用教程可参考vant weapp小程序组件实现图片上传文章。
2、wx.compressImage压缩图片接口,可选压缩质量
参数
属性 | 类型 | 必填 | 说明 |
src | string | 是 | 图片路径,图片的路径,支持本地路径、代码包路径 |
quality | number | 否 | 压缩质量,范围0~100,数值越小,质量越低,压缩率越高(仅对jpg有效) |
success | function | 否 | 接口调用成功的回调函数 |
fail | function | 否 | 接口调用失败的回调函数 |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
实例代码
wx.compressImage({
src:'', //图片地址
quality:80 //图片压缩质量
})
将vant weapp图片上传组件中上传后返回的临时图片路径放到wx.compressImage的src中,通过设置的压缩质量返回压缩后图片的临时文件路径。
将返回的tempFilePath路径用于上传到服务器接口中。
3、wx.uploadFile将本地资源上传到服务器
实例代码
wx.uploadFile({
url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的上传接口
filePath: tempFilePath,
name: 'file',
success (res){
const data = res.data
}
})
将第二步中返回的tempFilePath路径放到wx.uploadFile的filePath中,完成本地资源上传到服务器操作,服务器接收到图片资源后保存到服务器文件中并返回给访问接口图片储存的地址,剩下的问题就交给自动化识别接口了。