七牛云上传文件js_微信小程序自定义相机并且照片上传至七牛云

公司微信小程序项目需要做一个门禁系统，有一个人脸识别的功能。

因为对人脸识别的正确率要求比较高，所以需要在相机里加一个人脸轮廓的标记，来提高正确率。如下

wxml代码

调用手机原生相机应该是不行的，查阅了官方文档，使用和组件可以达到自定义这样的效果。下面直接贴代码。

核心代码就是和分别是覆盖在原生组件上的人脸轮廓和相机组件。

js

首先相机是一个新的页面，也就是说我点击上传头像的时候，实际上跳转了页面。创建相机上下文，拍照成功后把临时照片地址传给上一页(上页展示照片)。

这样一个自定义的相机就算完成了，因为后端接口还没提供，所以我打算上传到七牛云测试下。

七牛云会免费提供一些存储空间，我们可以拿他来暂时存储照片

第一步新建存储空间

第二步生成上传token

token为了安全起见都是后台来生成的，所以正常情况下都是后端提供token，我们只需要调请求token接口就好了  

因为我们这里只是用测试，所以就前端来生成token了，七牛云也提供了相关的 SDK。

下载小程序的SDK官方提供的SDK工具包

https://developer.qiniu.com/sdk#community-sdk

解压出来后在utils文件里把qiniuUploader.js拷贝出来，放到自己的工程文件里(这个文件提供了官方的上传功能)

使用七牛云SDK上传必须要带上token的，token必须用到3个参数scope、AccessKey和SecretKey

scope: 资源要存放的文件夹名字，如上图，我存放的文件夹是bydimages

AccessKey和SecretKey在这里

接下来我们手动生产token，随便开个工程文件，npm install qiniu安装七牛云依赖包

我们这里就简单的实现了一个token，如果需要更多自定义token可以参考文档

https://developer.qiniu.com/kodo/sdk/1289/nodejs#upload-token

上面我们已经拿到上传七牛云必须的token值了，接下来调用七牛云提供的上传方法

接下来解释下上图初始化七牛云中的参数

• regin如下图，上图的region注释错了，SCN应该是华南区

• 

• uptokenURL如下图(具体建议参考官网，万一官网更新了地址呢。。。)

• 

• uptoken就是刚才生成的token

• 再介绍个属性expires: 7200 // token有效期，我这里设置了2小时

• domain为域名，我因为没有绑定域名所以直接用了测试域名，如下图

接下来就完全ok了