Ajax-第三天

HTTP

即网络传输协议。规定浏览器与服务器交互的数据格式。

ajax的请求原理：发送请求报文；

网页从输入url到渲染的主要过程

formData对象

在接口文档中，凡是涉及到文件上传的，都需要formData对象

原因：

1.文件上传的传输方式必须是post，且必须设置单独的请求头，该请求头用来告知服务器数据类型。

1. 文件是以二进制方式传输，formdata对象可以将文件自动转为二进制。

上传文件的思路：

1. 给file表单绑定change事件：在file表单选定文件后可触发

2. 获取用户选择的文件 :this.files[0]

3. 创建formdata对象

4. 将接口文档中所需参数及值添加到formdata对象中 ： new formdata().append(’参数‘，’值‘)

5. 发送阿贾克斯请求，其参数为formdata对象

  document
        .querySelector("#iptFile")
        .addEventListener("change", function () {//绑定change事件，是file表单独有事件
          //console.log(this.files[0]);
          let fd = new FormData();//创建formdata对象
          fd.append("avatar", this.files[0]);给formdata对象添加参数
          axios({
            method: "post",
            url: "http://www.liulongbin.top:3009/api/upload/avatar",
            data: fd,//阿贾克斯请求中的参数必须是formdata对象
          }).then((res) => {
            console.log(res)
          });
        });

文件预览功能思路 （实现如下这种功能）

1. 给file表单绑定change事件

2. 获取文件 this.files[0]

3. 将选取的文件转为临时url :URL.createObjectURL()

4. 显示到页面

 document
        .querySelector("#heroIcon")
        .addEventListener("change", function () {//给file表单绑定change事件
          let file = this.files[0];//获取文件 this.files[0]
          let url = URL.createObjectURL(file);//将选取的文件转为临时url  :URL.createObjectURL()
          document.querySelector(".preview").src = url;//显示到页面
        });