0

我正在使用带有异步 Web 门户的修改后的 Captive 门户的简单代码（来自 ESPAsyncWebServer 库 - https://github.com/me-no-dev/ESPAsyncWebServer）。它从 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", HTTP_GET, [](AsyncWebServerRequest * request) {
    request->send(SPIFFS, "/image1.jpg", "image/jpg"); // this part has been modified
  });

在此处解释的设置部分中 - https://randomnerdtutorials.com/display-images-esp32-esp8266-web-server/

但它不起作用。我试过在它出现的地方弄乱路径更改“/”，但没有运气。此外，如果我改变

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

至

void handleRequest(AsyncWebServerRequest *request) {
  request->send(SPIFFS, "/image1.jpg", "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>

它在 non-captive_portal 解决方案上运行良好（如前面提到的教程中所述）。

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

4

1 回答 1

1

我挣扎了一段时间。但这里是答案。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);
    }
};
于 2020-11-10T09:29:42.447 回答