将多个SPIFFS文件添加到ESP32上的异步Web服务器上的强制门户

问题描述

我正在使用带有异步Web门户（来自ESPAsyncWebServer库-https://github.com/me-no-dev/ESPAsyncWebServer）的经过修改的Captive门户的简单代码。它从SPIFFS闪存发送html页面。

它现在的工作方式是在任何连接上发送index.html。我刚刚修改了在提到的示例中发送hmtl代码的一行。我想存档的是能够发送更多文件，例如html文件和图像。

这是我的代码：

#include <DNSServer.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include "ESPAsyncWebServer.h"
#include <SPIFFS.h>

DNSServer dnsServer;
AsyncWebServer server(80);

class CaptiveRequestHandler : public AsyncWebHandler {
  public:
    CaptiveRequestHandler() {}
    virtual ~CaptiveRequestHandler() {}

    bool canHandle(AsyncWebServerRequest *request) {
      //request->addInterestingHeader("ANY");
      return true;
    }

    void handleRequest(AsyncWebServerRequest *request) {
      request->send(SPIFFS,"/index.html",String(),false);
    }
};

void setup() {

  Serial.begin(115200);

  if (!SPIFFS.begin()) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  WiFi.softAP("esp-captive");
  dnsServer.start(53,"*",WiFi.softAPIP());

  server.addHandler(new CaptiveRequestHandler()).setFilter(ON_AP_FILTER);//only when requested from AP

  server.on("/image1",HTTP_GET,[](AsyncWebServerRequest * request) {
    request->send(SPIFFS,"/image1.jpg","image/jpg"); // this part has been modified
  });

  server.begin();
}

void loop() {
  dnsServer.processNextRequest();
}

我尝试添加

  server.on("/image1","image/jpg"); // this part has been modified
  });

在设置部分（如此处所述-https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

但是它不起作用。我试图弄乱路径更改“ /”的出现位置，但是没有运气。而且，如果我改变了

void handleRequest(AsyncWebServerRequest *request) {
  request->send(SPIFFS,false);
}

到

void handleRequest(AsyncWebServerRequest *request) {
  request->send(SPIFFS,"image/jpg");
}

登录到AP时，我得到的不是网站图片，所以我认为路径很好。

要添加更多信息，这是我的网页代码：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body style="background-image: url('image1'); background-size: contain; background-color: black; background-repeat: no-repeat; background-position: 50% 0%; height=100%">
<h1 style="color:white">ESP32</h1>
</body>
</html>

，并且在非强制性门户解决方案上运行良好（如先前提到的教程中所述）。

所以我的问题是，如何不仅可以在异步Web服务器的强制门户中加载单个文件，还可以加载更复杂（仍然非常简单）的网页？

解决方法

我为此挣扎了一段时间。但这是答案。在CaptiveRequestHandler() {}上，您可以发起http呼叫。

以下是您的示例：

class CaptiveRequestHandler : public AsyncWebHandler {
  public:
    CaptiveRequestHandler() {
      /* THIS IS WHERE YOU CAN PLACE THE CALLS */
       server.onNotFound([](AsyncWebServerRequest *request){
        AsyncWebServerResponse* response = request->beginResponse(SPIFFS,"/NotFound.html","text/html");
        request->send(response);
       });

      server.on("/Bootstrap.min.css",HTTP_GET,[](AsyncWebServerRequest *request) {
        AsyncWebServerResponse* response = request->beginResponse(SPIFFS,"/Bootstrap.min.css","text/css");
         request->send(response);
      });
    }
    virtual ~CaptiveRequestHandler() {}

    bool canHandle(AsyncWebServerRequest *request) {
      //request->addInterestingHeader("ANY");
      return true;
    }

    void handleRequest(AsyncWebServerRequest *request) {
      request->send(SPIFFS,"/index.html",String(),false);
    }
};

esp32 spiffs webserver

将多个SPIFFS文件添加到ESP32上的异步Web服务器上的强制门户

问题描述

解决方法

相关问答