参考视频：https://www.bilibili.com/video/BV1yR4y1X72D/，http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/iot-c/spiffs/spiffs-web-server/load-imagecsss-javascript/（可下载程序，但可能需要简单修改），https://blog.csdn.net/weixin_43794311/article/details/128722001（基础使用参考）

程序和配置

程序修改，但WiFi需要自己配置

#include 
#include 
#include 
#include      //使用不是FS,后面的SPIFFS也都需要改ESP8266WiFiMulti wifiMulti;     // 建立ESP8266WiFiMulti对象ESP8266WebServer esp8266_server(80);    // 建立网络服务器对象，该对象用于响应HTTP请求。监听端口（80）
void handleUserRequet();
bool handleFileRead(String path);   //这里需要声明
String getContentType(String filename);void setup() {Serial.begin(9600);          // 启动串口通讯Serial.println("");wifiMulti.addAP("自己wifi", "wifi密码"); // 将需要连接的一系列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的IPif(LittleFS.begin()){                       // 启动闪存文件系统Serial.println("LittleFS Started.");} else {Serial.println("LittleFS 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);// 如果在LittleFS无法找到用户访问的资源，则回复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便于LittleFS访问} String contentType = getContentType(path);  // 获取文件类型if (LittleFS.exists(path)) {                     // 如果访问的文件可以在LittleFS中找到File file = LittleFS.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";
}

vs code的platformIO的ini文件配置

[env:nodemcuv2]
platform = espressif8266
board = nodemcuv2
framework = arduino
board_build.filesystem = littlefs
board_build.ldscript = eagle.flash.4m2m.ld

首先了解

存储空间中有程序的存储地址和文件存储地址，可以对单独一个部分的写入不影响另一部分内容。

vs code 的platformIO插件进行程序和文件的上传

基本创建工程和程序可以参考：https://blog.csdn.net/weixin_43794311/article/details/128722001
注意，使用这种方式都会将本身原有的对应区域的内容清除。例如，上传程序会清除原有程序（但不会对存储文件flash有影响），同理上传文件也一样。

需要注意要设置flash内存

就相当于Arduino中的下图部分设置，

就是在vs code中添加下面这句，board_build.filesystem = littlefs，

参考文件的查找

文件参考介绍

文件系统使用库

默认版本是SPIFFS，为了适配旧版本的工程，但如果使用LittleFS就需要在环境中写入了。

修改flash中的大小分配

由于esp8266是4MB的芯片，点击一个进行查看

上传程序

上传文件

1，首先，把文件放在一个名字是data的文件夹中，而data文件夹放置的位置和工程文件src文件夹的同级目录下（几个文件夹是通过在vs code中使用platformIO创建工程时自动生成的），如 下图所示

**2，**点击外星人头一样的图标（就是platformIO插件的图标）