new FormData()对象的作用以及使用方法

引言

我们一般上传使用的是form表单提交，可以把所有表单元素的name与value组成一个queryString,提交到后台。这用jquery的方法来说，就是serialize

// 把表单的值序列化成字符串
let str = $('form').serialize();       
结果：username=lisi&tel=12345678909&password=123456&getPassword=123456
// 把表单的值序列化成数组
let arr = $('form').serializeArray();   
结果：
[{name:'username',value:'lisi'},
 {name:'tel',value:'12345678909'},
 {name:'password',value:'123456'},
 {name:'getPassword'},value:'123456']

但是上述的方式，只能传递一般的参数, 上传文件的文件流是无法被序列化并传递的。所以我们就可以使用到formdata对象，就可以轻松进行文件上传了。

formdata对象

创建formdata对象实例的方式
方式一：

let formdata = new FormData()
console.log(formdata)

方式二：使用已有的表单来初始化一个对象实例

<form action="" method="post" id="myform">
	姓名:<input type="text" name="name" value="zbt">
	密码:<input type="password" name="password" value="123456">
	<input type="button" value="提交">
</form>
-----------------------------------------------------------------------------
<script>
    let form = document.querySelector('#myform')
    let formdata = new FormData(form)
    let name = formdata.get('name')
    console.log(name);		// zbt
</script>

操作方法
获取值：get(key)/getAll(key)
添加数据：append(key,value) 如果key不存在会新增一条数据，如果key存在，则添加到数据末尾

let formdata = new FormData()
formdata.append('name','zbt')
formdata.append('name','hhh')
console.log(formdata.getAll('name'));	// 获取key为name的所有值，是一个数组
console.log(formdata.get('name'));		// 获取key为name的第一个值

修改数据：set(key,value) 如果key不存在会新增一条,如果存在则会修改对应value值

formdata.set('pwd','123456')
console.log(formdata.get('pwd'));	// 123456
formdata.set('pwd','abcdef')
console.log(formdata.get('pwd'));	// abcdef

删除数据：delete(key)
判断是否有该数据：has(key) 如果存在返回true,否则返回false

formdata.set('pwd','abcdef')
console.log(formdata.has('pwd'));	// true
formdata.delete('pwd')
console.log(formdata.has('pwd'));	// false

formdata对象应用

FormData 对象的使用：
1. 用一些键值对来模拟一系列表单控件：即把form中所有表单元素的name与value组装成一个queryString
2. 异步上传二进制文件。

使用formdata对象上传头像

 <input type="file" accept="image/png,image/gif,image/jpeg" @change="update"/>
<input type="file" accept="image/*" @change="upload" capture="camera">
//更换头像
async upload (e) {
  const formdata = new FormData()
  formdata.append('file',e.target.files[0])
  let {data:{data}} = await avator(formdata)		
  this.show = false;
  modifyUser({avatar:data.path})
  this.getUserInfo()
},