HTTP
即网络传输协议。规定浏览器与服务器交互的数据格式。
![](https://i-blog.csdnimg.cn/blog_migrate/e5f1bf63fe4d3680a52d6b6e1e52e003.png)
ajax的请求原理:发送请求报文;
网页从输入url到渲染的主要过程
![](https://i-blog.csdnimg.cn/blog_migrate/8011e0bb62cbed1bc16912f2d571c8fd.png)
formData对象
在接口文档中,凡是涉及到文件上传的,都需要formData对象
原因:
1.文件上传的传输方式必须是post,且必须设置单独的请求头,该请求头用来告知服务器数据类型。
文件是以二进制方式传输,formdata对象可以将文件自动转为二进制。
上传文件的思路:
给file表单绑定change事件:在file表单选定文件后可触发
获取用户选择的文件 :this.files[0]
创建formdata对象
将接口文档中所需参数及值添加到formdata对象中 : new formdata().append(’参数‘,’值‘)
发送阿贾克斯请求,其参数为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)
});
});
文件预览功能思路 (实现如下这种功能)
![](https://i-blog.csdnimg.cn/blog_migrate/99d14d41828e293f1e9cf330e056150e.png)
给file表单绑定change事件
获取文件 this.files[0]
将选取的文件转为临时url :URL.createObjectURL()
显示到页面
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;//显示到页面
});