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

利用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

前端代码

  
  
  
  


    
ESP32 DHT Server!
    

    

      
      Temperature
      %TEMPERATURE%
      °C
    
    

      
      Humidity
      %HUMIDITY%
      %
    

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