esp32-cam拍照上传+微信小程序照片显示

1、ESP32-cam开发环境配置

本例程 是利用arduino IDE开发，关于arduino IDE 的esp32环境配置可参考：环境配置: 点击跳转

安装好esp32 环境，开发板选择esp32 wrover module开发板，其他默认即可。

2 、程序下载

示例程序下载：点击下载

需要修改的信息有WIF名称，WIFI密码，用户私钥UID，设备主题topic。

/*********************需要修改的地方**********************/

const char* ssid = "newhtc";           //WIFI名称
const char* password = "qq123456";     //WIFI密码
int capture_interval = 20*1000;        // 默认20秒上传一次，可更改（本项目是自动上传，如需条件触发上传，在需要上传的时候，调用take_send_photo()即可）
const char*  post_url = "http://images.bemfa.com/upload/v1/upimages.php"; // 默认上传地址
const char*  uid = "4d9ec352e0376f2110a0c601a2857225";    //用户私钥，巴法云控制台获取
const char*  topic = "mypicture";     //主题名字，可在控制台 图云 处新建

/********************************************************/

用户私钥可以巴法云控制台 点击跳转 获取，注册登陆即可在巴法云控制台获取。https://cloud.bemfa.com/tcp/images.html

关于主题topic：主题可在控制台图云处创建， 点击跳转 新建，字母+数字自定义组合即可。

连线

在这里插入图片描述

注意：下载的时候 ESP32-cam的io0要接GND，下载结束后，必须断开io0和GND的连接。

在arduino IDE 点击烧录上传，然后需要按一下esp32-cam的reset按键，程序才会下载。下载完成后，断开io0的连线，再按一下reset按键，就退出下载模式了，即可正常使用。注意：由于部分电脑USB电压不稳，会导致esp32反复重启，可使用充电宝等供电。

如果WIFI信息正常，esp32就会自动连接wifi，并进行拍照上传，默认20秒上传一次，可自行修改频率，或者更改为触发条件拍照，需要拍照上传的时候，调用一下take_send_photo（）函数即可，比如

if(引脚==高电平)
{
   take_send_photo();
}

3、 控制台查看图片

登陆巴法云控制台，点击进入图云，即可查看到已经上传的图片，双击可查看大图。

在这里插入图片描述

在这里插入图片描述

第四、微信小程序开发

在 微信公众平台注册小程序账号，拿到小程序 appid，右侧点击 -开发--> 开发管理-->开发设置---->开发者ID，里面可以看到，长的大概是这样：wx34a2063de5cec04b，下面导入项目的时候会用到。

右侧点击 -开发--> 开发管理-->开发设置---->服务器域名。下方服务器域名处，点击修改，在request合法域名处，添加域名https://images.bemfa.com 保存提交即可。如下图。

01.png

下载安装微信开发者工具，可百度下载。

下载demo示例程序。下载地址： 点击下载

打开微信开发者工具，小程序项目，导入项目。在目录处选择刚刚下载解压的demo示例程序，AppID处填入你的小程序AppID，然后点击下方导入即可。如下图。

03.png

本示例程序非常简单，各位大神可以继续开发添加各种功能，界面修改，优化色彩等等，如果只是简单使用，只需修改/pages/index/index.js 文件中uid 和topic 信息为自己的即可，这里的uid和topic需要和esp32-cam填入的uid和topic相同，如下。

  data: {
    uid:"4d9ec352e0376f2110a0c601a2857225",//用户密钥，巴法云控制台获取
    myTopic:"mypicture",//图片上传的主题，图片云控制台创建
    num:5,      //获取的图片数量，可随意
    imgList:[], //存储图片地址和时间，用于前端展示
    picArr:[], //存储图片的地址，用于图片点击预览
  },

修改完毕后，ctrl+s 保存修改。可以点击左边屏幕上的按钮进行调试，如下图。

04.png

console控制台可以查看小程序的调试信息。

如果界面和其他功能都开发完毕。可以点击微信开发者工具的上面的上传按钮，如下图。

在这里插入图片描述

上传成功后，再登陆刚刚注册的微信公众平台，在版本管理处，可以看到自己刚刚上传的小程序，提交审核即可，等一天左右，一般都会通过，通过后登陆微信公众平台，提交发布即可。如果是自己使用的，做好加上登陆验证功能，比如验证匹配一下某个字符串是否正确等等，不然小程序上线后别人也可以随意控制了。

在这里插入图片描述

05.png