一、新建formData对象
1、创建空formData对象
// 直接通过new来创建new FormData()
const formdata=new FormData();
//append()方法增加数据
formdata.append("name","zhangsan");
//get方法获取数据
console.log(formdata.get("name"));// zhangsan
//set方法修改数据，如不存在键，会自动加上
formdata.set("name","lisi");
console.log(formdata.get("name"));//lisi
2、示例
html：
<input id="planFile" type="file" class="form-control" ng2FileSelect [uploader]="planImport"
(change)="planChange($event)"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
js：
planChange(event) {
let uploadInput = document.getElementById('planFile');
if (event.target.files && event.target.files[0]) {
const file = event.target.files[0];
const formDatas = new FormData();
formDatas.append('file', this.file);
}
}
二、API
FormData提供的方法
- FormData.append()
向FormData中添加新的属性值，如果FormData对应的属性值存在则覆盖原值，否则新增一项属性值。 - FormData.set()
给FormData设置属性值，如果FormData对应的属性值存在则覆盖原值，否则新增一项属性值 - FormData.get()
返回在 FormData对象中与给定键关联的第一个值 - FormData.getAll()
返回一个包含FormData对象中与给定键关联的所有值的数组。 - FormData.delete()
从FormData对象里面删除一个键值对 - FormData.has()
返回一个布尔值表明 FormData对象是否包含某些键 - FormData.keys()
返回一个包含所有键的iterator对象 - FormData.values()
返回一个包含所有值的iterator对象。 - FormData.entries()
返回一个包含所有键值对的iterator对象
1、通过get(key)与getAll(key)来获取相对应的值
// 获取key为age的第一个值
formdata.get("age");
// 获取key为age的所有值，返回值为数组类型
formdata.getAll("age");
2、通过append(key,value)在数据末尾追加数据
//通过FormData构造函数创建一个空对象
const formdata=new FormData();
//通过append()方法在末尾追加key为name值为lisi的数据
formdata.append("name","lisi");
//通过append()方法在末尾追加key为name值为zhangsan的数据
formdata.append("name","zhangsan");
//通过append()方法在末尾追加key为name值为wangwu的数据
formdata.append("name","wangwu");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//lisi
//通过getAll方法读取key为name的所有值
console.log(formdata.getAll("name"));//["lisi", "zhangsan", "wangwu"]
3、通过set(key, value)来设置修改数据
key的值不存在，会添加一条数据
//如果key的值不存在,会添加key
formdata.set("name","lisi");
//通过get方法读取key为name的第一个值
console.log(formdata.get("name"));//lisi
key的值存在，会修改对应的value值
4、通过has(key)来判断是否存在对应的key值文章来源：https://www.toymoban.com/news/detail-744902.html
//判断是否包含key为name的数据
console.log(formdata.has("name"));//true
//判断是否包含key为age的数据
console.log(formdata.has("age"));//false
5、通过delete(key)可以删除数据文章来源地址https://www.toymoban.com/news/detail-744902.html
//删除key为name的值
formdata.delete("name");
console.log(formdata.get("name"));//null
到了这里，关于new FormData()的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
