ESP8266学习六通过闪存文件系统上传web端程序

使用闪存文件系统建立功能更加丰富的网络服务器
- 掌握了如何向ESP8266开发板的闪存文件上传文件，我们就有了更多的空间来存储更加丰富的网页资源，从而让我们实现功能更加丰富的物联网项目。
本节教程里，我们将向您介绍一系列ESP8266开发板搭建的网页服务示例
在网页中加载闪存文件系统中的图片、CSS和JavaScript
- 请点击以上链接将本实例所用的示例程序下载并解压缩。在本示例中，您将看到data文件夹一共有5个文件和一个文件夹。以下是各个文件的作用：
- index.html：ESP8266开发板建立的网站首页
- main.css：控制网页的css(层叠样式表)
- JavaScript.js和clock.js：在页面中显示日期和时钟的JavaScript文件。这两个程序主要用于演示如何在ESP8266开发板所建立的物联网页面中显示JavaScript
- img目录中的图片taichi-maker.jpg:此图片用于演示如何在ESP8266开发板所建立的物联网页面中显示图片

#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("");wifiMulti.addAP("TP-LINK_7AAD", "LKQ123456+");  // 这三条语句通过调用函数addAP来记录3个不同的WiFi网络信息。wifiMulti.addAP("CMCC-3289", "15208883289"); // 这3个WiFi网络名称分别是taichi-maker, taichi-maker2, taichi-maker3。wifiMulti.addAP("CMCC-3289-5G", "15208883289"); // 这3个网络的密码分别是123456789，87654321，13572468。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的IPif(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";
}

代码：文件详情

先上传文件夹
然后烧录代码
当我们找不到函数是就会调用 onNotFound 函数当我们不用on函数请求时就会直接用onNotFound 进行请求当有浏览器向服务器发送请求时就会调用通过handleFileRead函数处处理用户访问如果找到了请求的数据内容就返回真值否则就返回假；当我们请求首页信息时就将"/"替换为"/index.html"把浏览器所请求的信息与闪存文件系统内的文件名对应起来
对请求分析如图首先对首页进行请求之后为.css 后为时钟的.js 和太极创客的logo图片
通过一个字符串变量去得到文件类型，
重点：读取文件之后将这个文件返回给浏览器
通过对请求的文件结尾的判断返回相应字符串告诉服务器现在需要的文件类型是什么。，
通过这次实验我们可以结合自己所学web知识展示更加丰富的界面，只需修改web文件的内容便可以完成。

ESP8266学习六通过闪存文件系统上传web端程序相关推荐

ESP8266-NodeMCU网络服务器——通过网页将文件上传到闪存文件系统
ESP8266WebServer esp8266_server(80); / 建立网络服务器对象,该对象用于响应HTTP请求.监听端口(80) File fsUploadFile; / 建立文件对象用 ...
ESP8266 NodeMCU 闪存文件系统（SPIFFS）
目录闪存文件系统 ESP8266闪存文件系统基本操作 1. 通过程序向闪存文件系统写入信息 2. 通过程序从闪存文件系统读取信息 3. 通过程序向闪存文件系统文件添加信息 4. 通过程序读取目录内容 ...
Esp32-Arduino 学习（闪存文件系统）
目录闪存文件写入闪存文件读取闪存文件删除从Arduino IDE 上传文件注:本文代码来自于太极创客团队: www.taichi-maker.com,由于太极创客的教程是基于esp8266, ...
闪存文件系统（Flash File System）
最近调研了一下闪存文件系统,部分结果展示如下,如有错误欢迎评论指正~ 一.背景闪存(flash memory),是一种电子式可清除程序化存储器的形式,允许在操作中被多次擦或写的存储器. 随着现在闪存 ...
闪存驱动器_“空”和新格式化的闪存驱动器上如何有可用空间？
闪存驱动器 When you delete everything from a flash drive and reformat it, you would think it should 'disp ...
ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制
ESP32利用SPIFFS(闪存文件系统)创建 Web服务器实现引脚控制在本教程中,我们将向您展示如何构建一个web服务器,以提供存储在ESP32文件系统中的HTML和CSS文件.我们将创建分离的H ...
Android OpenGL ES 学习(六) – 使用 VBO、VAO 和 EBO/IBO 优化程序
OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学 ...
解决从本地文件系统上传到HDFS时的权限问题
解决从本地文件系统上传到HDFS时的权限问题参考文章: (1)解决从本地文件系统上传到HDFS时的权限问题 (2)https://www.cnblogs.com/hapjin/p/4846853.h ...
存储桶上传策略和签名 URL的绕过及利用
本文中带有自己一些拙见,读者若存在相关问题或者有其他想法的,欢迎在评论区交流探讨.原文:https://labs.detectify.com/2018/08/02/bypassing-exploiti ...

ESP8266学习六通过闪存文件系统上传web端程序

使用闪存文件系统建立功能更加丰富的网络服务器

ESP8266学习六通过闪存文件系统上传web端程序相关推荐

最新文章

热门文章

ESP8266学习 六 通过闪存文件系统上传web端程序

使用闪存文件系统建立功能更加丰富的网络服务器

ESP8266学习 六 通过闪存文件系统上传web端程序相关推荐

最新文章

热门文章

ESP8266学习六通过闪存文件系统上传web端程序

ESP8266学习六通过闪存文件系统上传web端程序相关推荐