ESP32-CAM上传图片到服务器进行网页访问(宝塔面板)

释放双眼,带上耳机,听听看~!

一、前提条件

  • 有公网服务器,比如阿*、腾*、华*啥的云服务器;
  • 部署了宝塔面板
  • 知道怎么样在宝塔上创建网站目录,创建文件夹和文件,知道网页路径关系啥的

 

如果这些你都不知道,也没有云服务器,没关系,我已经给大家搭建好了,大家只需要使用下面的接口就可以了:

接口地址:https://gp.qutaojiao.com/test/upload.php

上传图片查看地址:https://gp.qutaojiao.com/test/uploads/

只需要把硬件程序的下面两行改成如下所示即可,记住wifi账号密码也得改:

String serverName = “gp.qutaojiao.com”; // 硬件程序里把这个变量改成接口网址
String serverPath = “/test/upload.php”;    //由于我把文件放在了根目录的test目录下面,所以得这样写

上传程序,打开串口监视器查看上传的界面,成功了打开   https://gp.qutaojiao.com/test/uploads/     就可以看到你自己上传的照片:


有点离题了,回到正文,下面是自己有云服务器的,可以接着往下看,

假设你创建好了网站,域名为:xxx.qutaojiao.com,如果没有域名,直接ip也可以访问,ip假设为110.120.119.121

接着往下阅读↓

二、浏览本文章前你需要

这篇文章是基于以下文章的扩展:

使用ESP32-CAM通过HTTP POST将照片发送到本地或云服务器

同时,可以参考作者@浅蓝 针对上面这篇文章的补充分享:

ESP32-CAM上传图片到服务器进行网页访问(宝塔面板)

三、进入正文

1、在网站根目录创建文件名:upload.php,粘贴如下代码:

<?php
// Code Based on this example: w3schools.com/php/php_file_upload.asp
$target_dir = "uploads/";
$datum = mktime(date('H')+0, date('i'), date('s'), date('m'), date('d'), date('y'));
$target_file = $target_dir . date('Y.m.d_H:i:s_', $datum) . basename($_FILES["imageFile"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["imageFile"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  }
  else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}
// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}
// Check file size
if ($_FILES["imageFile"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "<div style='color:red'>欢迎访问趣讨教ESP32-CAM照片上传测试接口,此接口只做测试使用,请勿用于非法途径!谢谢支持!</div></br>";
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
}
else {
  if (move_uploaded_file($_FILES["imageFile"]["tmp_name"], $target_file)) {
    echo "The file ". basename( $_FILES["imageFile"]["name"]). " has been uploaded.";
  }
  else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

接着,在upload.php相同位置创建目录:uploads。

进入uploads目录,创建文件:index.php,

接着,复制以下代码到index.php:

保存,搞定,看一下网站结构:

1级——网站根目录(xxx.qutaojio.com)

1级————index.php

1级————uploads

2级—————— index.php

 

接着,打开网站xxx.qutaojiao.com/upload.php

访问成功将会如下图页面提示表示第一步成功了:

接着访问:xxx.qutaojiao.com/uploads,看到如下图页面提示所示表示成功了:

接着去按照这篇文章:

使用ESP32-CAM通过HTTP POST将照片发送到本地或云服务器

硬件程序需要修改几行代码:

String serverName = “xxx.qutaojiao.com”; //改成自己的域名或者ip地址
String serverPath = “/upload.php”;           //改成upload.php所在的路径

上传程序,出现如下串口界面,表示图片正在上传:

接着去打开xxx.qutaojiao.com/uploads页面,就可以看到上传的照片了:

给TA打赏
共{{data.count}}人
人已打赏
ESP32ESP32-进阶免费项目

Esp32如何使用Socket上传数据到云服务器

2022-3-22 9:02:37

免费项目动态

请教:mixly怎么利用这个库使用nRT24

2022-4-20 20:03:27

9 条回复 A文章作者 M管理员
  1. 小林不吃1
    小林不吃1给您打赏了¥50
  2. 狐狸崽

    ?

  3. 且溯

    源码记得+转义:
    String head = “–RandomNerdTutorialsrnContent-Disposition: form-data; name=”imagefile”; filename=”esp32-cam.jpg”rnContent-Type: image/jpegrnrn”;

  4. 且溯

    我这个始终看不到图片呢,

    • Luca

      不应该呀,我这边是正常的呢

    • 且溯

      请问你那里是看得到照片吗

    • 且溯

      方便加个联系方式吗。。不会占用你太多时间

  5. 且溯

    我这边试了在我的服务器上也不行。

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索