ESP8266 Web文件上传“踩坑“记录 2024/7/28

梦境虽美，却不长

于 2024-07-28 00:44:17 发布

阅读量169

点赞数 6

分类专栏： esp8266 文章标签：前端 java javascript

本文链接：https://blog.csdn.net/qq_43422073/article/details/140743852

版权

esp8266 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

ESP8266 Web文件上传"踩坑"记录

挺有意思的,你永远不知道下一个问题出现在哪里,这东西照着抄都能出错,我也是服了.....,关键就是出现在这个on调用上,偷懒想用一个函数干两件事,事实证明, 是我庸人自扰了!

处理文件上传所需的步骤和格式：

定义路由和HTTP方法: 必须定义一个路由（通常是"/"或一个特定的URL路径）和HTTP方法（通常是POST），因文件上传通常用POST方法。
处理函数: 需要至少两个处理函数：一个用于发送HTTP响应头，另一个用于处理上传的文件数据

最重要的一条设置: ESP_server.on("/",HTTP_POST,requstOk,uploadA);

响应处理函数 (requstOk): 这个函数的主要任务是在接收到POST请求时立即发送一个200 OK响应头，告诉客户端请求已被接受。这通常是一个非常简单的函数，仅需发送响应状态码

void requstOk()
{
  ESP_server.send(200);
}

文件上传处理函数 (uploadA): 这个函数负责读取上传的文件数据，将其保存到文件系统，并处理可能的错误。这个函数可能会比较复杂，因为它需要处理文件流、文件保存位置、文件名冲突等问题。

void uploadA()
{
  HTTPUpload& upload = ESP_server.upload();
  if (upload.status == UPLOAD_FILE_START)
  { // 如果上传状态为UPLOAD_FILE_START

    String filename = upload.filename; // 建立字符串变量用于存放上传文件名
    if (!filename.startsWith("/"))
      filename = "/" + filename;              // 为上传文件名前加上"/"
    Serial.println("File Name: " + filename); // 通过串口监视器输出上传文件的名称

    fsUploadFile = SPIFFS.open(filename, "w"); // 在SPIFFS中建立文件用于写入用户上传的文件数据
  }
  else if (upload.status == UPLOAD_FILE_WRITE)
  { // 如果上传状态为UPLOAD_FILE_WRITE

    if (fsUploadFile)
      fsUploadFile.write(upload.buf, upload.currentSize); // 向SPIFFS文件写入浏览器发来的文件数据
  }
  else if (upload.status == UPLOAD_FILE_END)
  { // 如果上传状态为UPLOAD_FILE_END
    if (fsUploadFile)
    {      Serial.println("文件上传成功");                                          // 如果文件成功建立
      fsUploadFile.close();                         // 将文件关闭
      Serial.println(" Size: " + upload.totalSize); // 通过串口监视器输出文件大小
      ESP_server.sendHeader("Location", "/index.html"); // 将浏览器跳转到/success.html（成功上传页面）
      ESP_server.send(303);                             // 发送相应代码303（重定向到新页面）
    }
  }
}

web代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件管理系统</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;

    }

    body {
        width: 100vw;
        height: 100vh;
        display: grid;
        grid-template-columns: 5vw 1fr 5vw;
        grid-template-rows: 5vh 1fr 5vh;
        text-align: center;

    }

    h1 {
        width: 100%;
        grid-column: 1;
        grid-row: 1;
    }

    div {
        font-size: 1.2em;
        height: 100%;
        grid-column: 2;
        grid-row: 2;


    }
</style>

<body>
    <h1>文件管理系统</h1>
    <div>
        <h2>上传文件</h2>
        <form id="form2" method="post" enctype="multipart/form-data">
            <input type="file" name="file" di="fileinput">
        </form>
        <p>index.html为主页文件标准</p>
        <p>该页面主要用于上传文件</p>
        <p id="ts"></p>
        <button id="but" form="form2" style="width: 50%;position:relative;margin-top: 20%;box-shadow: 0 0 6px 0 black;">确认上传</button>
    </div>
    <script>
       
    </script>

</body>

</html>