一、新建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值
//判断是否包含key为name的数据
console.log(formdata.has("name"));//true
//判断是否包含key为age的数据
console.log(formdata.has("age"));//false
5、通过delete(key)可以删除数据
//删除key为name的值
formdata.delete("name");
console.log(formdata.get("name"));//null
版权归原作者 小修勾在学习嘛 所有, 如有侵权,请联系我们删除。