记录一次小程序中讨厌的拍照上传的优化

背景

工作中出现了一个业务，需要用户拍照并上传base64格式的图片内容供后台识别。项目并非从零开始，一通配置后跑了起来。自测了一会，下班时间到，开溜。

就在回家路上，打开手机分享图片时傻眼了，相册里全是自测的时候拍摄的照片，感到不舒服，这个项目之前据说已经交付过，我觉得用户肯定和我一样不舒服。

就这样

折腾劲来了~

目标

这次要折腾的目标很明确： 不影响逻辑(已有的代码能不动就不动)、不能再保存拍摄过的照片到相册中。

调研结果

现有代码中通过调用wx.chooseMedia来进行拍照上传，微信小程序没有相关配置项，是否保存到相册等等。所以要改用其他的api来实现： 借助camera元素及其api

实现

• 新建一个page，在wxml中插入camera元素及拍摄按钮，还可以放置其他必要的元素，例如提示框等;

• 声明一个page的方法，例如getCameraContent用来获取camera相机内容，将此方法绑定到拍摄按钮中;

代码案例：

copy
// 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>

copy
// 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调用时，会出现相机全屏的行为，我们新方案给了个新页面，行为一致，对用户影响较小。初次之外还可以在页面中插入一些自定义内容，定制化方面很友好。

为什么要改？

我们在微信拍照时通常都是身份证、人脸、银行卡等一些敏感信息，此类信息在处理时更应该注意安全。