基于ESP32 IDF的WebServer实现以及OTA固件升级实现记录(三)

          经过前面两篇的前序铺垫,对webserver以及restful api架构有了大体了解后本篇描述下最终的ota实现的代码以及调试中遇到的诡异bug。

         eps32的实际ota实现过程其实esp32官方都已经基本实现好了,我们要做到无非就是把要升级的固件搬运到对应ota flash分区里面,相对来说esp32 ota已经很完善了。esp32的ota相关接口可参见官网的相关ota文档。本文主要讲解基于http post方式的本地webserver的ota实现。

        1、网页端web实现,主要完成固件选择以及上传post功能,该部分可以参考开源web,如esp32-vue3demo/vue-project/src/views/Upgrade.vue at main · lbuque/esp32-vue3demo · GitHub

<template>
  <form method='POST' action='/api/v1/update' enctype='multipart/form-data'>
    <input type='file' name='update'>
    <input type='submit' value='Update'>
  </form>
</template>

<script lang="ts" setup >

</script>

<style scoped lang="scss"></style>

如上代码的效果如下,主要是有一个文件选择框可以选择要升级的固件,点击update后即会向web后台url:/api/v1/updata进行post请求传输要升级的固件给运行webserver的后台即esp32,该部分即完成了待升级固件的网络传输。

        2、esp32 webserver的post文件请求接收以及实际的ota flash写入。

           ota过程需要先找到要写入的ota分区,然后接收文件后按esp32的ota api写入ota分区即可,文件传输完成后即可启动esp32进行固件升级。升级代码如下:


    /* URI handler for light brightness control */
    httpd_uri_t light_brightness_post_uri = {
        .uri = "/api/v1/update",
        .method = HTTP_POST,
        .handler = light_brightness_post_handler,
        .user_ctx = rest_context
    };
    httpd_register_uri_handler(server, &light_brightness_post_uri);

注册一个用于接收post文件的rest api,回调名懒得改,实际项目中按编码要求进行修改。

static esp_err_t light_brightness_post_handler(httpd_req_t *req)
{
    
    esp_err_t err;
    /* update handle : set by esp_ota_begin(), must be freed via esp_ota_end() */
    esp_ota_handle_t update_handle = 0 ;
    const esp_partition_t *update_partition = NULL;

    char filepath[FILE_PATH_MAX];
    ESP_LOGI(REST_TAG, "light_brightness_post_handler");
    /* Skip leading "/upload" from URI to get filename */
    /* Note sizeof() counts NULL termination hence the -1 */
    const char *filename = get_path_from_uri(filepath, ((struct file_server_data *)req->user_ctx)->base_path,
                                             req->uri + sizeof("/upload") - 1, sizeof(filepath));
   
    ESP_LOGI(REST_TAG, "Receiving file : %s...", filename);

    /* Retrieve the pointer to scratch buffer for temporary storage */
    char *buf = ((struct file_server_data *)req->user_ctx)->scratch;
    int received;

    /* Content length of the request gives
     * the size of the file being uploaded */
    int remaining = req->content_len;

    
    while (remaining > 0) {

        if(remaining == req->content_len)
        {
            update_partition = esp_ota_get_next_update_partition(NULL);
            assert(update_partition != NULL);
            ESP_LOGI(REST_TAG, "Writing to partition subtype %d at offset 0x%"PRIx32,update_partition->subtype, update_partition->address);
            err = esp_ota_begin(update_partition, OTA_SIZE_UNKNOWN, &update_handle);
            if (err != ESP_OK) {
                ESP_LOGE(REST_TAG, "esp_ota_begin failed (%s)", esp_err_to_name(err));
                esp_ota_abort(update_handle);
            }
            ESP_LOGI(REST_TAG, "esp_ota_begin succeeded");
        }

        ESP_LOGI(REST_TAG, "Remaining size : %d", remaining);
        /* Receive the file part by part into a buffer */
        if ((received = httpd_req_recv(req, buf, MIN(remaining, SCRATCH_BUFSIZE))) <= 0) {
            if (received == HTTPD_SOCK_ERR_TIMEOUT) {
                /* Retry if timeout occurred */
                continue;
            }

            /* In case of unrecoverable error,
             * close and delete the unfinished file*/
            

            ESP_LOGE(REST_TAG, "File reception failed!");
            /* Respond with 500 Internal Server Error */
            httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to receive file");
            return ESP_FAIL;
        }

        err = esp_ota_write( update_handle, buf, received);
        if (err != ESP_OK) {
            esp_ota_abort(update_handle);
        }

        /* Keep track of remaining size of
         * the file left to be uploaded */
        remaining -= received;
         ESP_LOGI(REST_TAG, " remaining = %d, received = %d", remaining, received);
    }

    /* Close file upon upload completion */
   
    ESP_LOGI(REST_TAG, "File reception complete");

    /* Redirect onto root to see the updated file list */
    httpd_resp_set_status(req, "303 See Other");
    httpd_resp_set_hdr(req, "Location", "/");
#ifdef CONFIG_EXAMPLE_HTTPD_CONN_CLOSE_HEADER
    httpd_resp_set_hdr(req, "Connection", "close");
#endif
    httpd_resp_sendstr(req, "File uploaded successfully");


    ESP_LOGI(REST_TAG, "======endota======");
    err = esp_ota_end(update_handle);
    if (err != ESP_OK) {
        if (err == ESP_ERR_OTA_VALIDATE_FAILED) {
            ESP_LOGE(REST_TAG, "Image validation failed, image is corrupted");
        }
        ESP_LOGE(REST_TAG, "esp_ota_end failed (%s)!", esp_err_to_name(err));
    }
    err = esp_ota_set_boot_partition(update_partition);
    if (err != ESP_OK) {
        ESP_LOGE(REST_TAG, "esp_ota_set_boot_partition failed (%s)!", esp_err_to_name(err));

    }
    ESP_LOGI(REST_TAG, "Prepare to restart system!");
    esp_restart();

    return ESP_OK;

    
}

        大体代码的含义就是接收post请求后持续读取文件知道传输完成,同时传输过程中写ota分区的flash。

        实际按如上代码进行build后即可进行ota升级。运行起来一切都ok,不过没有意外下还是出现了意外,web页面选择固件进行升级后esp32端接收到的bin文件总是格式不对,出现了如下错误,

错误提示传输的文件不是bin文件格式,因此怀疑是post传输问题,通过web的开发者工具查看post的文件大小果真和实际文件大小不一致,

此时还没法确定是esp32嵌入式端代码问题还是web端前端代码问题,后面找了curl工具,

直接用命令行接口进行post试了后可以正常升级,post过来的大小也是实际的文件大小。至此基本可以确认是前端web页面 post的时候自己传输头等有修改了content-length导致其比实际的bin文件更大导致esp32接收的bin文件错误。

经过后面修改发现只有用原始的xmlrequest才不会像html或者axios那样会导致传输的content-length会比实际的bin文件大从而导致ota固件升级失败的问题。

改善后的web端的post关键代码如下:

 upload() {
      // your upload logic here using XMLHttpRequest
      const uploadPath = "/upload/" + this.filePath;
      const fileInput = document.getElementById("newfile").files;
      
      // add your upload logic using XMLHttpRequest here
      // be sure to use "this.filePath" and "fileInput" from Vue data

      // Example
      const file = fileInput[0];
      const xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4) {
          if (xhttp.status == 200) {
            document.open();
            document.write(xhttp.responseText);
            document.close();
          } else if (xhttp.status == 0) {
            alert("Server closed the connection abruptly!");
            location.reload();
          } else {
            alert(xhttp.status + " Error!\n" + xhttp.responseText);
            location.reload();
          }
        }
      };
      xhttp.open("POST", "/api/v1/update", true);
      xhttp.send(file);
    }

webserver ota传输升级没问题的log截图

esp32 的webserver ota的源代码放github上,有需要的自行取用,iot-lorawan (iot-lorawan) · GitHub

关于web端为何用xtmlrequest进行post的时候content-length才能是正确的bin文件大小,而axios或者html自带的post都会导致该字段长度偏大的目前原因还不得而知。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/764721.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

自定义动态数据源+事务控制

1&#xff1a;首先yml配置两个数据库的链接 spring:application:name: xxxxmain:banner-mode: OFFdatasource: # 默认数据源 datamarkdruid: # 关闭数据库的 web 访问stat-view-servlet:enabled: falseweb-stat-filter:enabled: falsefilt…

巴比达内网穿透:深度剖析其在解决远程连接挑战中的技术优势

在信息技术日新月异的今天&#xff0c;远程协作与管理的需求日益增长&#xff0c;但内网环境的隔离性一直是横亘在高效远程操作面前的一道坎。本文将深入探讨一款专为打破此壁垒而生的工具——巴比达内网穿透&#xff0c;如何以其技术创新和高效性能&#xff0c;成为解决远程连…

electron-builder 打包过慢解决

报错内容如下 > 6-241.0.0 build > electron-builder • electron-builder version24.13.3 os10.0.22631 • loaded configuration filepackage.json ("build" field) • writing effective config filedist\builder-effective-config.yaml • pack…

【Linux详解】进程地址空间

目录 研究背景 验证地址空间 实验一&#xff1a;父子进程变量地址一致性 实验二&#xff1a;变量值修改后父子进程的差异 分析与结论 实验三&#xff1a;进程地址空间验证 理解进程地址空间 区域与页表 写时拷贝机制 进程地址空间的意义 文章手稿&#xff1a; xmind…

7月信用卡新规下:信用卡欠的钱不用还了?

说到信用卡&#xff0c;现在基本上人手一张&#xff0c;大家都有使用过。但你知道吗&#xff0c;使用信用卡不是这么简单容易的事&#xff0c;比如会对你的贷款有影响&#xff0c;透支不还逾期对生活的影响&#xff0c;信用卡新规对持卡人和银行那边的影响。 一、只要不逾期&am…

hamibot 学习

1.参考文档&#xff1a; https://blog.csdn.net/zxl0428/article/details/1285318731.参考官网 快速入手步骤&#xff1a;注册&#xff0c;安装客户端&#xff0c;添加设备&#xff0c;开发脚本&#xff0c;运行脚本 https://hamibot.com/guide1.安装客户端 2.添加设备 …

高通骁龙(Qualcomm Snapdragon)CDSP HVX HTP 芯片简介与开发入门

1. Hexagon DSP/HVX/HTP 硬件演进 说到高通骁龙芯片大家应该不会陌生&#xff0c;其作为最为广泛的移动处理器之一&#xff0c;几乎每一个品牌的智能手机都会使用高通骁龙的处理器。 高通提供了一系列骁龙芯片解决方案。根据性能强弱分为了5个产品系列&#xff1a;从最高端的…

【neo4j图数据库】入门实践篇

探索数据之间的奥秘&#xff1a;Neo4j图数据库引领新纪元 在数字化浪潮汹涌的今天&#xff0c;数据已成为企业最宝贵的资产之一。然而&#xff0c;随着数据量的爆炸性增长和数据关系的日益复杂&#xff0c;传统的关系型数据库在处理诸如社交网络、推荐系统、生物信息学等高度互…

OPCUA相关概念和KepServer OPCUA连接PLC

文章背景 项目中需要使用OPC UA 来读取PLC的点位。本文简单介绍了OPC UA和使用KepServer软件连接PLC并读点。OPC相关概念 OPC之前&#xff0c;软件开发需要写大量驱动程序去连接设备&#xff0c;设备上的一个硬件改变&#xff0c;应用程序都有可能需要重写&#xff0c;不同设备…

水经微图Web版1.9.0发布

水经微图&#xff08;简称“微图”&#xff09;新版已上线&#xff0c;在该版本中主要新增了对WGS84图源加载、火星坐标图源加载和大字体图源加载功能&#xff0c;以及多面要素的加载功能。 现在&#xff0c;为你分享一下本轮迭代的主要新增功能&#xff0c;以及部分功能的效果…

STL空间配置器

空间配置器&#xff08;allocator&#xff09;&#xff08;重点&#xff09; 背景需求&#xff1a;在底层默默的实现空间的分配 问题&#xff1a;空间的申请与对象的创建两者分开&#xff0c;因为不断创建的时候可能会频繁的申请空间扩容。 类似操作&#xff1a;reserve函数…

自动扫描范围在减少剂量多相CT肝脏成像中的应用:基于CNN和高斯模型| 文献速递-深度学习自动化疾病检查

Title 题目 Automatic scan range for dose-reduced multiphase CT imaging of theliver utilizing CNNs and Gaussian models 自动扫描范围在减少剂量多相CT肝脏成像中的应用&#xff1a;基于CNN和高斯模型 01 文献速递介绍 肝癌是全球癌症死亡的第四大原因&#xff0c;每…

告别推广迷茫,Xinstall渠道包助您精准统计应用商店数据!

在App推广的浩瀚征途中&#xff0c;每一位广告主和开发者都面临着同样的挑战&#xff1a;如何在众多应用商店中脱颖而出&#xff0c;实现高效推广与精准获客&#xff1f;今天&#xff0c;就让我们一同探索Xinstall应用商店渠道包的独特魅力&#xff0c;看看它是如何成为解决这一…

【产品经理】聊聊PLG策略

PLG 是一种以用户增长为导向的策略&#xff0c;如何理解这种策略&#xff1f;适合采用PLG模式的SaaS又有哪些&#xff1f; 一、企业软件采购方式的变迁 从用户的角度&#xff1a;企业软件采购从CIO主导&#xff0c;逐渐演化为经理或者员工可做出决策。 从供应商的角度&#x…

剪映 v5.5 Pro Vip解锁版:使用指南与注意事项

摘要&#xff1a;本文介绍了剪映Pro VIP解锁版的使用方法&#xff0c;包括安装、测试和使用VIP素材的步骤&#xff0c;以及如何避免误报和保持解锁状态的建议。 正文&#xff1a; 剪映Pro是一款广受欢迎的视频编辑软件&#xff0c;提供了丰富的视频编辑功能和大量高质量的素材…

自动化测试报告pytest-html样式美化

最近我将 pytest-html 样式优化了 一版 先看优化前&#xff1a; 优化后&#xff1a; 优化内容包括&#xff1a; 删除部分多余字段新增echart图表部分字体大小、行间距、颜色做了美化调整运行环境信息移至报告最后部分字段做了汉化处理&#xff08;没全部翻译是因为&#xf…

python学习-函数

函数 函数&#xff1a;是组织好的&#xff0c;可重复使用的&#xff0c;用来实现特定功能的代码段。 内置函数可重复使用 为什么要学习、使用函数呢&#xff1f; 为了得到一个针对特定需求、可供重复利用的代码段 提高程序的复用性&#xff0c;减少重复性代码&#xff0c;…

记一次阿里云服务器java应用无法响应且无法远程连接的问题排查

问题表现 java服务无响应&#xff0c;无法远程链接到服务器。 今天中午12点多&#xff0c;应用直接崩溃。后续进入到服务器&#xff0c;发现java进程都不在了&#xff0c; 排查过程 先安装atop工具 安装、配置并使用atop监控工具 等下次再出现时看相关时间点日志&#xff…

Docker在windows上使用vscode远程连接容器

目录 一、提前准备&#xff1a; 二、vscode连接docker容器 三、构建好的docker容器直接连接vscode 四、Windows下的可视化出linux的ui界面 在日常的开发中&#xff0c;不想windows和linux两个系统之间来回切换&#xff0c;笔者最近打算所有的环境均在一个系统上完成。为了交…

26K Star!LLM多智能体AutoGen教程3:我的外包弟弟写代码

读到这里想必已经入门AutoGen了&#xff0c;但怎么让它自动写代码自动调试啊&#xff0c;我也想要一个外包弟弟给我干活&#xff0c;我就喝杯茶摸摸鱼审核一下代码就好了呀。这不巧了&#xff0c;最近PM要求我给他弄一份某SDK支持车厂的列表&#xff0c;这种简单的事情在以前我…