ESP32 將檔案上傳存於ESP32 flash

使用ESP32當web server可將html、CSS、JPG、TEXT等檔案以FILE SYSTEM方式儲存在ESP32 flash內、 ESP32可透過LittleFS將檔案開啟在檔案系統內供存取,也可記錄WIFI的SSID、PW等讓MCU可在不同的WIFI 境連接AP

LittleFS環境設定

在VSCODE一般安裝ESP32的BOARD MANAGER就會下載littleFS library

1、確認mklittlefs.exe是否已在系統內路徑確認: C:\Users\choui\AppData\Local\Arduino15\packages \esp32\tools\mklittlefs\4.0.2-db0513a-cn\mklittlefs.exe

2、確認esptool.exe是否已存在系統確認路徑:C:\Users\choui\AppData\Local\Arduino15\packages \esp32\tools\esptool_py\5.2.0-cn\esptool.exe

上傳檔案程序

使用arduino extension in vscode

  • 於vscode編輯境在專案資料夾下新增data資料夾
  • 將要上傳到flash的檔案放置於此資料夾內
  • 在專案資料夾內的.vscode新增tasks.json,可參加下方鏈接
  • 在vscode編輯環境下可透下列各種操作方式上傳
    • 按 Ctrl + Shift + B
    • 按F1(function key),在上方命令欄內輸入Tasks:Run Build Task
    • 按 Ctrl + Shift + P 也可打開命令欄

LittleFS記憶體配置表

# Name, Type, SubType, Offset, Size, Flags

nvs, data, nvs, 0x9000, 0x5000,

otadata, data, ota, 0xe000, 0x2000,

app0, app, ota_0, 0x10000, 0x140000,

app1, app, ota_1, 0x150000,0x140000,

spiffs, data, spiffs, 0x290000,0x160000,

coredump, data, coredump,0x3F0000,0x10000,

LittleFS檔案開啟

程式中設計需要littlefs library

#include <LittleFS.h>

if (!LittleFS.begin(true)) {
    Serial.println("LittleFS 掛載失敗!");
    return;
}

server.serveStatic("/", LittleFS, "/").setDefaultFile("index.html");

#將html、CSS、JS、PNG等檔案載入到根目錄

tasks.json解析

mklittlefs.exe會將data資料夾內的檔案轉成BIN檔存放於build資料夾內, esptool.exe根據partitions.csv將BIN檔上傳到flash



            

參考網站LINK

1、LittleFS 參考網頁

2、參考案例:tasks.json

3、傑森創工 ESP32-S3 + 2.8 吋 TFT LCD 顯示JPG圖檔(LovyanGFX)

4、esp32 littlefs記憶體配置 by Gemini

5、tasks.json說明