FormData的两种使用方法
第一种 (手动挡): 一般用于文件上传
(1)创建一个空的FormData : let fd = new FormData()
(2)使用 append() 添加参数 : fd.append('参数名',参数值)
用于文件上传时,FormData()的主要作用是
:
(1)FormData会自动将请求头设置为文件: multipart/form-data
(2)FormData会自动将要上传的文件变成二进制(文件格式是二进制传输)
文件上传时的具体步骤
:
// 1. 给file 表单注册 onchange 事件
document.querySelector('#iptFile').addEventListener('change',function(){
// 此处的this 指的是: file 表单
// 2. 获取用户选择的文件
console.log(this.files); // 数组
let file = this.files[0]
/*
3. 文件数据必须要用内置对象 FormData 对象发送
(1)文件请求头不一样, multipart/form-data
* FormData自动设置文件请求头
(2)文件格式是 二进制传输
*FormData会自动把你的文件变成二进制
*/
let fd = new FormData()
// 追加参数 fd.append('参数名',文件数据)
fd.append('avatar',file)
// 4. 发送ajax,设置参数为fd
axios({
url:'http://www.liulongbin.top:3009/api/upload/avatar',
method:'post',
// 细节:这里参数直接写fd,千万不要{fd} ,因为fd本身就是对象类型,不需要{}单独包起来
data: fd
}).then(res=>{
//成功回调
console.log(res)
// 渲染图片
document.querySelector('img').src = `http://www.liulongbin.top:3009${res.data.url}`
})
})
第二种 (自动挡) : 用于一键获取form表单所有的参数
let fd = new FormData( form表单 )
(1)FormData小括号里的参数必须是 form标签,其他标签会报错
(2)FormData会自动遍历form里面的每一个表单元素,将表单元素的name属性作为参数名
,value作为参数值
使用FormData获取表单元素值的注意点
:
当我们使用FormData获取表单元素,且表单元素是ajax的参数时,我们需要注意ajax接口文件的请求头:
(1)当请求头为 Content-Type:multipart/form-data
时,我们可以直接将fd作为ajax的参数提交
(2)当请求头为 Content-Type: application/x-www-form-urlencoded
时,我们需要将fd里面的数据取出放入新定义的空对象里面,具体如下
:
// 获取表单元素里面的所有值
let fd = new FormData( document.querySelector('form') )
let obj = {}
// formdata不能直接打印,需要使用原型中有forEach方法才可以看到里面的数据
fd.forEach((item,index) => {
console.log(`${index}:${item}`); // index : 属性名 item : 属性值
obj[index] = item
})
FormData的遍历
let fd = new FormData() fd.append('参数名',参数值)
(1)要想拿到实例对象fd中的属性值,不能向普通对象一样,直接使用对象名.属性名
;也不能使用for-in来遍历,从而它里面的属性值和属性名
(2)对于fd而言,要想得到它的属性值和属性名,需要使用它原型对象的forEach方法
fd.forEach((item,index) => {
console.log(index,item) // 此处的index为参数名(属性名),item为参数值(属性值)
})