Upload files to flash file system through Arduino IDE

download Arduino-ESP8266 Flash file plug-in

adopt Click this link to enter Arduino-ESP8266 official GitHub Page download . See the screenshot below for details ：

esp8266fs The download page

Specific operation 3-3-2 adopt Arduino IDE Upload files to the flash file system – Taiji maker

When you're done, open 3-3-3 Use flash file system to build more functional network server – Taiji maker

Download the sample program

/**********************************************************************
 Project name /Project          :  Zero basic introduction to the Internet of things 
 Program name /Program name     : 3_4_1_SPIFFS_File_server
 The team /Team                :  Taiji maker team  / Taichi-Maker (www.taichi-maker.com)
 author /Author              : CYNO Shuo 
 date /Date（YYYYMMDD）     : 20191109
 Purpose of procedure /Purpose          : 
 When users access NodeMCU Address time ,NodeMCU Will check if the access address points to SPIFFS Files in the system , also 
 Display the file in the user's browser . If the file pointed to by the access address cannot be accessed in SPIFFS Find ,NodeMCU will 
 Send... To users 404 Information .
-----------------------------------------------------------------------
 Revision history /Revision History  
 date /Date     author /Author       Reference number /Ref     Revision notes /Revision Description
20200211     CYNO Shuo             0.01        Revised handleNotFound Function makes it more intuitive 
-----------------------------------------------------------------------
 This sample program is made by Taiji maker team 《 Zero basic introduction to the Internet of things 》 Sample program in .
 This tutorial is designed and produced by friends who are interested in the development of the Internet of things . For more information about this tutorial , Please refer to the following pages ：
http://www.taichi-maker.com/homepage/esp8266-nodemcu-iot/
***********************************************************************/

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

ESP8266WiFiMulti wifiMulti;     //  establish ESP8266WiFiMulti object 

ESP8266WebServer esp8266_server(80);    //  Create a web server object , This object is used to respond HTTP request . Listening port （80）

void setup() {
  Serial.begin(9600);          //  Start serial communication 
  Serial.println("");
  
  wifiMulti.addAP("CMCC-7093", "19881377093"); //  A series of... That will need to be connected WiFi ID And enter the password here 
  wifiMulti.addAP("ssid_from_AP_2", "your_password_for_AP_2"); // ESP8266-NodeMCU After restart, the current network will be scanned 
  wifiMulti.addAP("ssid_from_AP_3", "your_password_for_AP_3"); //  Find out if there are any... Listed here WiFi ID. If there is 
  Serial.println("Connecting ...");                            //  Then try to connect with the password stored here .
  
  int i = 0;  
  while (wifiMulti.run() != WL_CONNECTED) { //  Try to do wifi Connect .
    delay(1000);
    Serial.print(i++); Serial.print(' ');
  }
  
  // WiFi After the connection is successful, the connection success information will be output through the serial port monitor  
  Serial.println('\n');
  Serial.print("Connected to ");
  Serial.println(WiFi.SSID());              //  Monitor output connected through serial port WiFi name 
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           //  Monitor output through serial port ESP8266-NodeMCU Of IP

  if(SPIFFS.begin()){                       //  Start the flash file system 
    Serial.println("SPIFFS Started.");
  } else {
    Serial.println("SPIFFS Failed to Start.");
  }
  
  esp8266_server.onNotFound(handleUserRequet);      //  Tell the system how to handle user requests 

  esp8266_server.begin();                           //  Start Web Services 
  Serial.println("HTTP server started");
}

void loop(void) {
  esp8266_server.handleClient();                    //  Handling user requests 
}

//  Handle the user's browser HTTP visit 
void handleUserRequet() {         
     
  //  Get the URL information requested by the user 
  String webAddress = esp8266_server.uri();
  
  //  adopt handleFileRead Function to handle user access 
  bool fileReadOK = handleFileRead(webAddress);

  //  If in SPIFFS Unable to find the resource accessed by the user , Then reply 404 (Not Found)
  if (!fileReadOK){                                                 
    esp8266_server.send(404, "text/plain", "404 Not Found"); 
  }
}

bool handleFileRead(String path) {            // Working with browsers HTTP visit 

  if (path.endsWith("/")) {                   //  If you visit the address with "/" For the end 
    path = "/index.html";                     //  Then change the access address to /index.html Easy SPIFFS visit 
  } 
  
  String contentType = getContentType(path);  //  Get file type 
  
  if (SPIFFS.exists(path)) {                     //  If the accessed file can be in SPIFFS Find 
    File file = SPIFFS.open(path, "r");          //  Then try to open the file 
    esp8266_server.streamFile(file, contentType);//  And return the file to the browser 
    file.close();                                //  And close the file 
    return true;                                 //  return true
  }
  return false;                                  //  If the file is not found , Then return to false
}

//  Get file type 
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";
}

  The above is a sample code segment