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将照片发送到本地或云服务器

Luca

• 21年5月29日
• 喜欢：2
• 浏览：6.5k

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

ESP32-CAM将图像发布到云服务器-PHP（步骤及补充）

浅蓝

• 22年3月14日
• 喜欢：0
• 浏览：2k

三、进入正文

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将照片发送到本地或云服务器

Luca

• 21年5月29日
• 喜欢：2
• 浏览：6.5k

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

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

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

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