前后端交互一（ajax的封装，formData实现多文件上传，qq空间批量上传图片案例）

1.重点掌握及知识点

重点掌握：

1. XMLHttpRequest对象的使用
2. ajax的封装使用
3. 利用node搭建服务器提供数据
4. FormData对象的使用
5. 利用formData实现多文件上传
6. qq空间批量上传图片案例

知识点：

• XMLhttpRequet的使用
• 会使用ajax进行数据交互
• 会使用node搭建服务器
• 学会使用FormData来上传文件

2.ajax封装

封装步骤：

1. 使用Object.assign()函数将默认配置和传递配置参数进行合并；
2. 传递的method中，需要判断get/post，get传参需要使用queryString即使用?进行拼接url；post也要凭借成参数并通过send()进行传递；
3. 封装拼接url方法（Object.keys(obj)和Object.values(obj)），map循环key=value并使用join("&")进行拼接(这种方式如果数据对象为多层数据，需要递归解决)；
4. onload()方法获取返回数据，xhr.responseText()
5. 判断get/post方法，不同请求方式，send()方法不同。
6. 需要给出默认headers配置，用户也可以自定义设置，通过for in设置头部setRequestHeader()；设置头部后，需要switch判断头部，只有为JSON时，才能以封装的数据格式以post方式传递数据，如果是json格式，需要转为json再发送
7. onload()时也需要判断返还数据类型，或者直接使用JSON.parse()直接数据转为对象

封装成类似下面形式：

            ajax({
            url: "/xml",
            method: "post",
            data: {
                hello: "你好",
                height: "178cm"
            },
            success(res) {
                console.log(res)
            }
        })

3.通过formData实现《qq空间批量上传图片》

• 需求确定：相册内容显示相册

• nodejs搭建后台

• 分析上传元素

  1. 登录区分不同用户

  2. 创建上传对象

  3. 上传图片

  4. 获取上传后的最新图片数据

3.1需求确定

3.1.1相册内容显示相册

点击上传（可选择多张图片），上传成功后，会显示相册图片；

上传时，有上传进度显示

3.2nodejs搭建后台

使用nunjucks加载页面

3.3分析上传元素

3.3.1登录区分不同用户

3.3.2创建上传对象

1. 上传图片可以有多张图片：input中使用multiple="multiple"即可选择多张上传图片；
2. 获取并显示待上传图片：通过原生this.files可以获取所有图片对象。根据文件对象循环创建HTML（createElement("div")）放入对应容器中；
3. 通过FileReader读取上传文件。let fileReader = new FileReader(file);fileReader.readAsDataURL(file)；fileReader.onload()时将图片转为base64，并将base64作为临时路径（即在onload时再创建HTML）；
4. 继续添加时，继续创建HTML；

3.3.3上传图片

1. 上传：监控上传进度，后台转存；此处上传是一个接一个进行上传，将需要上传时将html中对象一个一个添加到数组中，上传时将每个图片抽象成图片类（每张图片都有自己的创建HTML，监控上传进度，上传等方法）；
2. 将创建的节点进行保存，用于监控上传进度；
3. 通过FormData进行上传
4. 通过unload中的onprogress监控上传进度，onload()处理上传成功后的处理；
5. 点击上传时，遍历存储的图片数组，并进行上传
6. 使用Promise监控一个一个上传：调用时返回Promise对象，在每一个上传的函数中，使用async await处理即可

3.3.4获取上传后的最新图片数据

3.4完整案例展示

 

4.总结

1. XMLHttpRequest对象的使用
2. ajax的封装使用
3. 利用node搭建服务器提供数据
4. FormData对象的使用
5. 利用formData实现多文件上传
6. 通过async和await处理异步
7. qq空间批量上传图片案例