虽然开发前端JS多年，但对于一些没有使用到的JS对象还是不大熟悉，WEB开发常用的是上传图片信息，今天把JS中有关于FormData对象做一下整理学习。

FormData对象

FormData对象是用一些键值对来模拟一系列表单控件： 把form中的所有元素的name和value组成一个QueryString，FormDdata中的数据类似Map<String,Object>，操作也类似map。可以做到存储获取到的文件流，达到异步上传文件的作用。

js formdata上传文件

1 创建formData
let formData = new FormData();

2 添加数据,key可以重复。不会被覆盖。因此可以多文件上传。多文件都放在同一个formData对象中
formData.append('file',xx);
formData.append('file',xx);

3 发送请求, 注意请求头数据类型要用 'multipart/form-data'
axios.post(url, formData, {
  "Content-Type": "multipart/form-data;",
})
.then(res => {

})

form表单使用formdata上传文件

<form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform">
 <input type="file" name="imagefile" @change="upload" ref="inputfile">
</form>
let uploadform = this.$refs.uploadform
let inputfile = this.$refs.inputfile
let formData = new FormData(uploadform) //初始化时将form Dom对象传入
formData.append('imagefile', inputfile) //将imagefile键追加进去，值为input-file的dom对象，否则服务端无法获取file
axios.post(this.postImgApi, formData, {
 headers: {
  'Content-Type': 'multipart/form-data' //设置post文件的请求头
 }
}).then(res => {
 debugger
 this.textarea = res.data
})

FormData添加其它数据时需要注意：FormData对象的set()方法和append()方法比较，set()方法指定的键如果存在，会使用新值覆盖原来的值，而append()方法会把新值添加到已有值集合的后面