利用SPIFFS（闪存文件系统）在ESP32Web服务器上显示图片
下面是本次案例的网页控制界面
项目文件架构
data文件夹用于通过Arduino IDE上传文件到SPIFFS（闪存文件系统）
下图为待上传的网页资源和图片资源
上传方式点此链接：https://blog.csdn.net/weixin_61908666/article/details/128415118
功能描述
-
通过利用SPIFFS（闪存文件系统）在ESP32Web服务器上显示图片
-
Web服务器页面显示3张图片：模型图、温度图标、湿度图标
-
Web服务器页面还显示接收到的当前的温度和湿度
示例代码
Arduino代码
#include "WiFi.h" #include "ESPAsyncWebServer.h" #include "SPIFFS.h" // wifi设置 const char *ssid = "*****"; const char *password = "*****"; // 在端口80上创建AsyncWebServer对象 AsyncWebServer server(80); // 处理刷新数据 String processor(const String& var){ Serial.println(var); if(var == "TEMPERATURE"){ return "30"; }else if (var == "HUMIDITY") { return "40"; } return String(); } void setup(){ // 初始化串口 Serial.begin(115200); // 初始化闪存文件系统 if(!SPIFFS.begin(true)){ Serial.println("An Error has occurred while mounting SPIFFS"); return; } // STA模式链接网络 WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.print("."); } Serial.println(WiFi.localIP()); // 加载根/ web页面的路由 server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/index.html", String(), false, processor); }); // 加载model.png文件的路由 server.on("/model", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/model.png", "image/png"); }); // 加载model.png文件的路由 server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/temperature.png", "image/png"); }); // 加载model.png文件的路由 server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest *request){ request->send(SPIFFS, "/humidity.png", "image/png"); }); // 启动服务器 server.begin(); } void loop(){ }
Arduino代码如想详细了解请看下面两个链接：
ESP32文件和文件系统使用（基于SPIFFS）：https://blog.csdn.net/weixin_61908666/article/details/128415118
ESP32搭建ESPAsyncWebServer异步服务器：https://blog.csdn.net/weixin_61908666/article/details/128415118
前端代码
<!DOCTYPE html> <html> <head> <meta http-equiv='refresh' content='4'/> <meta name='viewport' content='width=device-width, initial-scale=1'> <title>ESP32 DHT Server</title> <style> html { font-family: Arial; display: inline-block; margin: 0px auto; text-align: center; } h2{ color: #0F3376; padding: 2vh; } p { font-size: 3.0rem; } .units { font-size: 1.2rem; } .dht-labels{ font-size: 1.5rem; vertical-align:middle; padding-bottom: 15px; } </style> </head> <body> <h2>ESP32 DHT Server!</h2> <p><img src="model" width="140px" height="140px"/></p> <p> <img src="temperature" width="80px" height="80px"/> <span class='dht-labels'>Temperature</span> <span>%TEMPERATURE%</span> <sup class='units'>°C</sup> </p> <p> <img src="humidity" width="80px" height="80px"/> <span class='dht-labels'>Humidity</span> <span>%HUMIDITY%</span> <sup class='units'>%</sup> </p> </body> <script> setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("temperature").innerHTML = this.responseText; } }; xhttp.open("GET", "/temperature", true); xhttp.send(); }, 10000 ); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("humidity").innerHTML = this.responseText; } }; xhttp.open("GET", "/humidity", true); xhttp.send(); }, 3000 ) ; </script> </html>
前端代码不过多描述，比较浅显
