内置对象FormData

228 阅读1分钟

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为参数值(属性值)

})