ESP8266 OTA之浏览器更新

ESP8266的浏览器更新的过程是这样的

1. 用ESP8266先建立一个Web服务器然后提供一个更新界面(ESP8266HTTPUpdateServer)
2. 通过Arduino将源文件编译为*.bin的二进制文件
3. 通过mDNS功能在浏览器中访问ESP8266的服务器页面(如:http://esp8266.local/update)
4. 通过Web界面将本地编译好的*.bin二进制固件文件上传到ESP8266中
5. 上传完成编译文件后ESP8266将固件写入Sketch中

先刷入以下代码

/**
/*
  To upload through terminal you can use: curl -F "image=@firmware.bin" esp8266-webupdate.local/update
*/

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>
#include <ESP8266mDNS.h>
#include <ESP8266HTTPUpdateServer.h>

const char* host = "esp8266-webupdate";
const char* ssid = "........";
const char* password = "........";

ESP8266WebServer httpServer(80);
ESP8266HTTPUpdateServer httpUpdater;

void setup(void) {

  Serial.begin(115200);
  Serial.println();
  Serial.println("Booting Sketch...");
  WiFi.mode(WIFI_AP_STA);
  WiFi.begin(ssid, password);

  while(WiFi.waitForConnectResult() != WL_CONNECTED){
    WiFi.begin(ssid, password);
    Serial.println("WiFi failed, retrying.");
  }

  MDNS.begin(host);

  httpUpdater.setup(&httpServer);
  httpServer.begin();

  MDNS.addService("http", "tcp", 80);
  Serial.printf("HTTPUpdateServer ready! Open http://%s.local/update in your browser\n", host);
}

void loop(void){
  httpServer.handleClient();
}

然后在偏好设置中的Show verbose output dump选项中选中"Complation"

当固件刷新后，打开串口调试器就可以看到OTA的更新页面的地址：

直接在浏览器打开该地址：

是不是很丑？而且你是无法进行任何的美化的！

对代码进行编译，在最后就会出现便宜后的二进制格式的固件更新文件：

回到浏览器点击"Choose file" 按钮就可以将固件上传到ESP8266中去：

更新结束。

结论

这种更新模式其实只适用于在开发期的一些应急的场景，例如：ESP8266已安装到原型机或者产品内且

1. 无法与电脑相连进行直接的固件刷新。
2. 无法直接连接更新服务器进行固件更件

这种更新界面是无法提供给最终用户使用的，因为要进行固件更新的话用户得先获得固件的文件，然后还得通过一个非常丑的Web页面将文件上传上去。所以说这种方式只能给开发人员在应急的情况下将就地用一下。