ESP32 ESP-IDF基于Web的文件传输 - HTTP文件服务器

陈拓 2022/05/19-2022/05/21

1. 概述

简单HTTP文件服务器示例。

• 官方例程国内镜像

https://gitee.com/EspressifSystems/esp-idf/tree/master/examples/protocols/http_server/file_serving

HTTP文件服务器示例演示了使用ESP-IDF的esp_http_server组件，同时具有上载和下载功能的文件服务。此示例可以使用以下选项之一进行数据存储：

SPI闪存中的SPIFFS文件系统。此选项适用于任何ESP开发板，无需任何额外硬件。

SD卡上的FAT文件系统。SDSPI和SDMMC驱动程序都受支持。要使用此选项，您需要一个带有SD卡插槽的开发板。

服务器提供了以下URI：

文件服务器实现可以在 main/file_server.c. main/upload_script.html下找到、包含一些用于文件上传的html、JavaScript和Ajax内容。这些内容嵌入在flash映像中，并在生成文件服务器主页时使用。

请注意，默认index.html 和/favicon.ico文件可以通过将同名文件上载到文件系统来覆盖。

• SD卡和esp32的连接

如果选择SD卡上的FAT文件系统。ESP32与SD卡的连接可以使用SPI模式或者SDMMC模式，默认使用SPI模式。SPI模式使用4个引脚：

 * ESP32 can choose SPI or SDMMC Host, SPI is used by default: */
#define PIN_NUM_MISO 2
#define PIN_NUM_MOSI 15
#define PIN_NUM_CLK  14
#define PIN_NUM_CS   13

对应的电路图：

2. 开发环境

《用乐鑫国内Gitee镜像搭建ESP32开发环境》

https://zhuanlan.zhihu.com/p/348106034

https://blog.csdn.net/chentuo2000/article/details/113424934?spm=1001.2014.3001.5501

3. 构建项目

• 克隆官方例程

将官方例子项目复制到ESP-IDF开发工具之外：

cd ~/esp

cp -r ~/esp/esp-idf/examples/protocols/http_server/file_serving/ ~/esp/

• 项目树

cd file_serving

• 刷新esp-idf环境

get_idf

注意：每次打开终端进入sdk都要执行一次此命令

• 设定目标芯片

idf.py set-target esp32

在项目创建第一次使用，以后就不用运行这个命令了。

• 清除以前的构建

idf.py fullclean

在项目创建第一次使用。

• 配置项目

idf.py menuconfig

1) 设置Flash存储器大小为4MB

2) 设置SSID和Password

注意：只能连接2.4G的WiFi。

3) 存储介质设置

如果选择SPI闪存中的SPIFFS文件系统，这样设置：

如果选择SD卡上的FAT文件系统，这样设置：

4) 长文件名支持

ESP-IDF 框架下的 FATFS默认使用的文件名格式是8.3短文件名，即文件名为8个字节，.后的后缀为3个字节。一旦文件名称超出长度限制，就会出错。

给FATFS添加长文件名支持，更改_USE_LFN以支持大于8.3格式的文件名：

保存，退出。

• 编译项目

idf.py build

• 烧写项目

idf.py -p /dev/ttyS3 -b 115200 flash

• 启用监视器

idf.py monitor -p /dev/ttyS3

I (3583) example_connect: - IPv4 address: 192.168.3.65
I (3583) example_connect: - IPv6 address: fe80:0000:0000:0000:7ae3:6dff:fe09:5350, type: ESP_IP6_ADDR_IS_LINK_LOCAL

STA的IP地址为92.168.3.65

4. 浏览器测试

• 在浏览器地址栏输入http://192.168.3.65

• 上传文件

选择一个文件：

点击Upload：

 

• 下载/打开文件

单击文件链接可在浏览器上下载/打开文件（如果支持）。

如果是可以打开的文件，例如照片，在浏览器中会自动打开。如果要保存照片，可以右击照片，选择图片另存为…

对于不能打开的文件会下载。

• 删除文件

单击每个文件条目旁边可见的删除链接以删除它们。

• 串口log信息

 

5. curl命令测试

• 打开Windows命令窗口
• 上传文件（文件在当前目录下）

curl -X POST --data-binary @IMG-20220520.JPG 192.168.3.65:80/upload/img-20220521.jpg

 

串口信息：

 

在浏览器里刷新一下也能看到。

 

• 下载文件

curl 192.168.3.65:80/img-20220521.jpg > img-20220521.jpg

 

串口信息：

 

查看本地下载的文件：

 

参考文档

存储常见问题：https://docs.espressif.com/projects/espressif-esp-faq/zh_CN/latest/software-framework/storage.html