利用SPIFFS（闪存文件系统）在ESP32Web服务器上显示图片

眼底流转天上月

已于 2024-05-14 15:54:56 修改

阅读量1.1k

点赞数 3

分类专栏： Web ESP32 文章标签： c语言 html5

于 2023-02-25 11:57:07 首次发布

本文链接：https://blog.csdn.net/m0_60030015/article/details/129213676

版权

Web 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

ESP32

1 篇文章 0 订阅

订阅专栏

该文介绍如何在ESP32微控制器上建立一个Web服务器，利用SPIFFS文件系统存储并显示图片，同时显示实时的温度和湿度数据。通过Arduino代码实现文件上传、网络连接和HTTP请求响应，前端HTML页面周期性更新温度和湿度信息。

摘要由CSDN通过智能技术生成

利用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'>&deg;C</sup>
    </p>
    <p>
      <img src="humidity" width="80px" height="80px"/>
      <span class='dht-labels'>Humidity</span>
      <span>%HUMIDITY%</span>
      <sup class='units'>&percnt;</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>

前端代码不过多描述，比较浅显