HTML5新特性 day_04(8.10)地图、文件上传

一、接入第三方地图服务

第三方地图服务：高德地图、百度地图、腾讯地图

接入高德地图

打开高德地图开放平台： https://lbs.amap.com

选择：开发支持 -- web端 -- 地图JSAPI

功能1：在页面中显示地图

1. 准备一个html页面，提供div作为地图容器，设置id与css样式。

2. 引入script（设置key与jscode安全秘钥）

3. 创建地图对象，将地图显示在div中。调用地图的方法，对地图进行操作。

    

   功能2：添加地图图层。

   功能3：设置标记点。Marker

   功能4：为标记点绑定事件，弹窗 InfoWindow

   功能5：为地图添加控件插件。

   功能6：为地图添加web服务插件 - 查询定位、查询天气、搜索周边等

二、Vue项目中使用高德地图

1. 准备一个脚手架项目。element-project。

2. 在项目根目录，安装AMapLoader。

3. 找一个Vue组件，若在该vue组件中显示地图，需要提供一个div作为容器。

4. 在mounted中，使用AMapLoader加载AMap，通过AMap在div中显示地图。

三、文件上传

通过客户端的一些控件选择客户端文件，选择完毕后点击提交按钮，可以将选择到的文件通过网络传输给服务端，服务端接收文件并且将数据保存在服务端某一个文件夹下。这个过程称为文件上传。

文件上传具体流程

1. 客户端提供一个控件，让用户可以选择本地文件。

2. 选择完毕后，客户端提交请求给服务器，携带该文件数据一起发送给服务端。

3. 服务端接收请求，发现有一个文件数据流，边读取数据，边将数据保存在服务端某一个文件夹下。

4. 服务端读取完毕后，应该为该文件设计一个访问链接使得客户端可以通过该链接访问到这个文件， 并且将该链接通过响应数据返回给客户端：

5. 当客户端接收到响应后，就可以解析出访问该文件所需要的路径，拿着路径执行后续业务。

 

四、基于HTTP协议的文件上传规范

1. 浏览器发送上传文件的请求必须是post方式。

2. 请求数据包中需要包含消息头Header：

3. 服务端按照multipart/form-data方式解析请求数据，将文件读取出来，写入某文件夹中。保存起来。（此处非常灵活）

后端部署

1. 下载uploadserver.zip，解压缩。

2. 进入uploadserver文件夹，执行命令：

   node index.js