formdata收集数据

2022-04-06 11:01:47 阅读：208 来源： 互联网

标签：form 收集对象 formdata 表单数据 FormData 属性

通常在收集表单的时候我们都要涉及到绑定上传附件，这时候就可以用formdata的形式携带文件流上传给服务器。

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

使用方法：

1.创建一个formdata对象

 //新建formdata对象
            var formData=new FormData()

2.把文件放入formdata（通常放入二进制的raw文件）

//把文件放到formdata中
            formData.append('file',this.form.filePath.raw)

3.把收集到的表单数据插入到formdata中

//通过对对象的遍历forEach把每一项放到formdata中
Object.keys(this.form).forEach(key=>{
             //此处判断value不为空
              if(this.form[key]!=null){
                formData.append(key,this.form[key])
              }
            })

4.然后把收集到的formdata数据传送到后端服务器

formdata的属性方法

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对象

参考：https://www.cnblogs.com/cythia/p/11133587.html

标签：form,收集,对象,formdata,表单,数据,FormData,属性
来源： https://www.cnblogs.com/brxfdgjmy/p/16105286.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9