基于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

1. <template>
2.   <form method='POST' action='/api/v1/update' enctype='multipart/form-data'>
3.     <input type='file' name='update'>
4.     <input type='submit' value='Update'>
5.   </form>
6. </template>
8. <script lang="ts" setup >
10. </script>
12. <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举行固件升级。升级代码如下：

2.     /* URI handler for light brightness control */
3.     httpd_uri_t light_brightness_post_uri = {
4.         .uri = "/api/v1/update",
5.         .method = HTTP_POST,
6.         .handler = light_brightness_post_handler,
7.         .user_ctx = rest_context
8.     };
9.     httpd_register_uri_handler(server, &light_brightness_post_uri);

复制代码

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

1. static esp_err_t light_brightness_post_handler(httpd_req_t *req)
2. {
3.    
4.     esp_err_t err;
5.     /* update handle : set by esp_ota_begin(), must be freed via esp_ota_end() */
6.     esp_ota_handle_t update_handle = 0 ;
7.     const esp_partition_t *update_partition = NULL;
9.     char filepath[FILE_PATH_MAX];
10.     ESP_LOGI(REST_TAG, "light_brightness_post_handler");
11.     /* Skip leading "/upload" from URI to get filename */
12.     /* Note sizeof() counts NULL termination hence the -1 */
13.     const char *filename = get_path_from_uri(filepath, ((struct file_server_data *)req->user_ctx)->base_path,
14.                                              req->uri + sizeof("/upload") - 1, sizeof(filepath));
15.    
16.     ESP_LOGI(REST_TAG, "Receiving file : %s...", filename);
18.     /* Retrieve the pointer to scratch buffer for temporary storage */
19.     char *buf = ((struct file_server_data *)req->user_ctx)->scratch;
20.     int received;
22.     /* Content length of the request gives
23.      * the size of the file being uploaded */
24.     int remaining = req->content_len;
26.    
27.     while (remaining > 0) {
29.         if(remaining == req->content_len)
30.         {
31.             update_partition = esp_ota_get_next_update_partition(NULL);
32.             assert(update_partition != NULL);
33.             ESP_LOGI(REST_TAG, "Writing to partition subtype %d at offset 0x%"PRIx32,update_partition->subtype, update_partition->address);
34.             err = esp_ota_begin(update_partition, OTA_SIZE_UNKNOWN, &update_handle);
35.             if (err != ESP_OK) {
36.                 ESP_LOGE(REST_TAG, "esp_ota_begin failed (%s)", esp_err_to_name(err));
37.                 esp_ota_abort(update_handle);
38.             }
39.             ESP_LOGI(REST_TAG, "esp_ota_begin succeeded");
40.         }
42.         ESP_LOGI(REST_TAG, "Remaining size : %d", remaining);
43.         /* Receive the file part by part into a buffer */
44.         if ((received = httpd_req_recv(req, buf, MIN(remaining, SCRATCH_BUFSIZE))) <= 0) {
45.             if (received == HTTPD_SOCK_ERR_TIMEOUT) {
46.                 /* Retry if timeout occurred */
47.                 continue;
48.             }
50.             /* In case of unrecoverable error,
51.              * close and delete the unfinished file*/
52.             
54.             ESP_LOGE(REST_TAG, "File reception failed!");
55.             /* Respond with 500 Internal Server Error */
56.             httpd_resp_send_err(req, HTTPD_500_INTERNAL_SERVER_ERROR, "Failed to receive file");
57.             return ESP_FAIL;
58.         }
60.         err = esp_ota_write( update_handle, buf, received);
61.         if (err != ESP_OK) {
62.             esp_ota_abort(update_handle);
63.         }
65.         /* Keep track of remaining size of
66.          * the file left to be uploaded */
67.         remaining -= received;
68.          ESP_LOGI(REST_TAG, " remaining = %d, received = %d", remaining, received);
69.     }
71.     /* Close file upon upload completion */
72.    
73.     ESP_LOGI(REST_TAG, "File reception complete");
75.     /* Redirect onto root to see the updated file list */
76.     httpd_resp_set_status(req, "303 See Other");
77.     httpd_resp_set_hdr(req, "Location", "/");
78. #ifdef CONFIG_EXAMPLE_HTTPD_CONN_CLOSE_HEADER
79.     httpd_resp_set_hdr(req, "Connection", "close");
80. #endif
81.     httpd_resp_sendstr(req, "File uploaded successfully");
84.     ESP_LOGI(REST_TAG, "======endota======");
85.     err = esp_ota_end(update_handle);
86.     if (err != ESP_OK) {
87.         if (err == ESP_ERR_OTA_VALIDATE_FAILED) {
88.             ESP_LOGE(REST_TAG, "Image validation failed, image is corrupted");
89.         }
90.         ESP_LOGE(REST_TAG, "esp_ota_end failed (%s)!", esp_err_to_name(err));
91.     }
92.     err = esp_ota_set_boot_partition(update_partition);
93.     if (err != ESP_OK) {
94.         ESP_LOGE(REST_TAG, "esp_ota_set_boot_partition failed (%s)!", esp_err_to_name(err));
96.     }
97.     ESP_LOGI(REST_TAG, "Prepare to restart system!");
98.     esp_restart();
100.     return ESP_OK;
102.    
103. }

复制代码

        大体代码的含义就是接收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关键代码如下：

1. upload() {
2.       // your upload logic here using XMLHttpRequest
3.       const uploadPath = "/upload/" + this.filePath;
4.       const fileInput = document.getElementById("newfile").files;
5.       
6.       // add your upload logic using XMLHttpRequest here
7.       // be sure to use "this.filePath" and "fileInput" from Vue data
9.       // Example
10.       const file = fileInput[0];
11.       const xhttp = new XMLHttpRequest();
12.       xhttp.onreadystatechange = function() {
13.         if (xhttp.readyState == 4) {
14.           if (xhttp.status == 200) {
15.             document.open();
16.             document.write(xhttp.responseText);
17.             document.close();
18.           } else if (xhttp.status == 0) {
19.             alert("Server closed the connection abruptly!");
20.             location.reload();
21.           } else {
22.             alert(xhttp.status + " Error!\n" + xhttp.responseText);
23.             location.reload();
24.           }
25.         }
26.       };
27.       xhttp.open("POST", "/api/v1/update", true);
28.       xhttp.send(file);
29.     }

复制代码

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

esp32 的webserver ota的源代码放github上，有需要的自行取用，iot-lorawan (iot-lorawan) · GitHub
关于web端为何用xtmlrequest举行post的时候content-length才能是正确的bin文件大小，而axios大概html自带的post都会导致该字段长度偏大的目前原因还不得而知。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。