在网页中加载闪存文件系统中的图片、CSS和JavaScript 2——利用streamFile函数返回网页文件

#include <ESP8266WebServer.h>
ESP8266WebServer esp8266_server(80);

void setup(){
  esp8266_server.onNotFound(handleUserRequet);      // 告知系统如何处理用户请求
  esp8266_server.begin();                           // 启动网站服务
}

----1.获取请求文件的路径----
void handleUserRequet() {         
  String webAddress = esp8266_server.uri(); // 获取用户请求网址信息
  bool fileReadOK = handleFileRead(webAddress); // 通过handleFileRead函数处处理用户访问
}

---2.从闪存中读取文件并发送给浏览器---
bool handleFileRead(String path) {            
  String contentType = getContentType(path);  // 获取文件类型
  File file = SPIFFS.open(path, "r");  // 根据请求的资源路径path读取闪存中的信息并存储到file文件中；
  esp8266_server.streamFile(file, contentType);//将该文件返回给浏览器
}

 

String webAddress = esp8266_server.uri();  // 获取用户请求资源路径信息并赋值给字符串webAddress；

uri（）

说明:使用该函数可获取客户端发送的HTTP请求行中的请求资源路径信息。

语法:

server.uri()

参数:无

返回值:客户端请求行中的请求资源路径信息。（类型：字符串）

 File file = SPIFFS.open(path, "r");  // 根据请求的资源路径path读取闪存中的信息并存储到file文件中；

 esp8266_server.streamFile(file, contentType);  // 将file文件返回给浏览器

streamFile函数：发送响应体信息

语法

streamFile(file, contentType)

参数

file – 存储有响应信息的闪存文件对象
contentType（可选参数） – 响应信息系类型 （const String& ）

完整代码：

/**********************************************************************
项目名称/Project          : 零基础入门学用物联网
程序名称/Program name     : 3_4_1_SPIFFS_File_server
团队/Team                : 太极创客团队 / Taichi-Maker (www.taichi-maker.com)
作者/Author              : CYNO朔
日期/Date（YYYYMMDD）     : 20191109
程序目的/Purpose          : 
当用户访问NodeMCU地址时，NodeMCU将会检查访问地址是否指向SPIFFS系统中的文件，并且
将该文件显示于用户的浏览器中。如果访问地址所指向的文件无法在SPIFFS中找到，NodeMCU将会
向用户发送404信息。
-----------------------------------------------------------------------
修订历史/Revision History  
日期/Date    作者/Author      参考号/Ref    修订说明/Revision Description
20200211     CYNO朔            0.01       修改了handleNotFound函数使其更直观
-----------------------------------------------------------------------
本示例程序为太极创客团队制作的《零基础入门学用物联网》中示例程序。
该教程为对物联网开发感兴趣的朋友所设计和制作。如需了解更多该教程的信息，请参考以下网页：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/
***********************************************************************/

#include <ESP8266WiFi.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266WebServer.h>
#include <FS.h>  

ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象

ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）

void setup() {
  Serial.begin(9600);          // 启动串口通讯
  Serial.println("");
  //----------建立WiFi连接--------------
  wifiMulti.addAP("ssid_from_AP_1", "your_password_for_AP_1"); // 将需要连接的一系列WiFi ID和密码输入这里
  wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU再启动后会扫描当前网络
  wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); // 环境查找是否有这里列出的WiFi ID。如果有
  Serial.println("Connecting ...");                            // 则尝试使用此处存储的密码进行连接。
  
  int i = 0;  
  while (wifiMulti.run() != WL_CONNECTED) { // 尝试进行wifi连接。
    delay(1000);
    Serial.print(i++); Serial.print(' ');
  }
  
  // WiFi连接成功后将通过串口监视器输出连接成功信息 
  Serial.println('\n');
  Serial.print("Connected to ");
  Serial.println(WiFi.SSID());              // 通过串口监视器输出连接的WiFi名称
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           // 通过串口监视器输出ESP8266-NodeMCU的IP
 //----------建立WiFi连接--------------
 
  if(SPIFFS.begin()){                       // 启动闪存文件系统
    Serial.println("SPIFFS Started.");
  } else {
    Serial.println("SPIFFS Failed to Start.");
  }
  
  esp8266_server.onNotFound(handleUserRequet);      // 告知系统如何处理用户请求
  esp8266_server.begin();                           // 启动网站服务
  Serial.println("HTTP server started");
}

void loop(void) {
  esp8266_server.handleClient();                    // 处理用户请求
}

// 处理用户浏览器的HTTP访问
void handleUserRequet() {         
     
  // 获取用户请求网址信息
  String webAddress = esp8266_server.uri();
  
  // 通过handleFileRead函数处处理用户访问
  bool fileReadOK = handleFileRead(webAddress);

  // 如果在SPIFFS无法找到用户访问的资源，则回复404 (Not Found)
  if (!fileReadOK){                                                 
    esp8266_server.send(404, "text/plain", "404 Not Found"); 
  }
}

bool handleFileRead(String path) {            //处理浏览器HTTP访问

  if (path.endsWith("/")) {                   // 如果访问地址以"/"为结尾
    path = "/index.html";                     // 则将访问地址修改为/index.html便于SPIFFS访问
  } 
  
  String contentType = getContentType(path);  // 获取文件类型
  
  if (SPIFFS.exists(path)) {                     // 如果访问的文件可以在SPIFFS中找到
    File file = SPIFFS.open(path, "r");          // 则尝试打开该文件
    esp8266_server.streamFile(file, contentType);// 并且将该文件返回给浏览器
    file.close();                                // 并且关闭文件
    return true;                                 // 返回true
  }
  return false;                                  // 如果文件未找到，则返回false
}

// 获取文件类型
String getContentType(String filename){
  if(filename.endsWith(".htm")) return "text/html";
  else if(filename.endsWith(".html")) return "text/html";
  else if(filename.endsWith(".css")) return "text/css";
  else if(filename.endsWith(".js")) return "application/javascript";
  else if(filename.endsWith(".png")) return "image/png";
  else if(filename.endsWith(".gif")) return "image/gif";
  else if(filename.endsWith(".jpg")) return "image/jpeg";
  else if(filename.endsWith(".ico")) return "image/x-icon";
  else if(filename.endsWith(".xml")) return "text/xml";
  else if(filename.endsWith(".pdf")) return "application/x-pdf";
  else if(filename.endsWith(".zip")) return "application/x-zip";
  else if(filename.endsWith(".gz")) return "application/x-gzip";
  return "text/plain";
}