记录一次小程序中讨厌的拍照上传的优化
背景
工作中出现了一个业务,需要用户拍照并上传base64格式的图片内容供后台识别。项目并非从零开始,一通配置后跑了起来。自测了一会,下班时间到,开溜。
就在回家路上,打开手机分享图片时傻眼了,相册里全是自测的时候拍摄的照片,感到不舒服,这个项目之前据说已经交付过,我觉得用户肯定和我一样不舒服。
就这样
折腾劲来了~
目标
这次要折腾的目标很明确: 不影响逻辑(已有的代码能不动就不动)、不能再保存拍摄过的照片到相册中。
调研结果
现有代码中通过调用wx.chooseMedia
来进行拍照上传,微信小程序没有相关配置项,是否保存到相册等等。所以要改用其他的api来实现: 借助camera元素及其api
实现
-
新建一个page,在wxml中插入camera元素及拍摄按钮,还可以放置其他必要的元素,例如提示框等;
-
声明一个page的方法,例如
getCameraContent
用来获取camera相机内容,将此方法绑定到拍摄按钮中;
代码案例:
// wxml
<view class="camera-wrap">
<camera mode="normal" device-position="front" flash="auto" class="camera"></camera>
<button type="primary" class="take-btn" bindtap="getCameraContent">
拍照
</button>
</view>
// page.js
getCameraContent() {
return new Promise((resolve) => {
const cameraContext = wx.createCameraContext();
cameraContext.takePhoto({
quality: 'high',
success: (res) => {
resolve(res.tempImagePath);
}
})
})
}
这样在调用getCameraContent().then()
时就会拿到微信提供的本地临时路径,后续转换为Base64通过接口发送即可。其他地方逻辑并没有改变,只是改变了从点击上传到调用上传接口之间的逻辑。
这里通过新建页面的方式来实现,因为在之前wx.chooseMedia
调用时,会出现相机全屏的行为,我们新方案给了个新页面,行为一致,对用户影响较小。初次之外还可以在页面中插入一些自定义内容,定制化方面很友好。
为什么要改?
我们在微信拍照时通常都是身份证、人脸、银行卡等一些敏感信息,此类信息在处理时更应该注意安全。