通常在收集表单的时候我们都要涉及到绑定上传附件,这时候就可以用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

formdata收集数据的更多相关文章

  1. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  2. Burp Post、Get数据包转为上传multipart/form-data格式数据包

    方法一: 新建一个网页进行上传,代码代码如下: <html> <head></head> <body> <form method="po ...

  3. Java 8 (5) Stream 流 - 收集数据

    在前面已经使用过collect终端操作了,主要是用来把Stream中的所有元素结合成一个List,在本章中,你会发现collect是一个归约操作,就像reduce一样可以接受各种做法作为参数,将流中的 ...

  4. java8中用流收集数据

    用流收集数据 汇总 long howManyDishes = menu.stream().collect(Collectors.counting()); int totalCalories = men ...

  5. 《Java 8 in Action》Chapter 6:用流收集数据

    1. 收集器简介 collect() 接收一个类型为 Collector 的参数,这个参数决定了如何把流中的元素聚合到其它数据结构中.Collectors 类包含了大量常用收集器的工厂方法,toLis ...

  6. C#_Excel数据读取与写入_自定义解析封装类_支持设置标题行位置&使用excel表达式收集数据&单元格映射&标题映射&模板文件的参数数据替换

    本篇博客园是被任务所逼,而已有的使用nopi技术的文档技术经验又不支持我需要的应对各种复杂需求的苛刻要求,只能自己造轮子封装了,由于需要应对很多总类型的数据采集需求,因此有了本篇博客的代码封装,下面一 ...

  7. 在.NET Core 中收集数据的几种方式

    APM是一种应用性能监控工具,可以帮助理解系统行为, 用于分析性能问题的工具,以便发生故障的时候,能够快速定位和解决问题, 通过汇聚业务系统各处理环节的实时数据,分析业务系统各事务处理的交易路径和处理 ...

  8. 【仿真】Carla之收集数据快速教程 (附完整代码) [7]

    收集过程可视化展示,随后进入正文: 参考与前言 看到仿真群对这类任务下(用carla收集数据然后再做训练等) 需求量大,顺手马上写一个好了,首先收集数据需要考虑清楚: 收集什么数据,需要什么样的数据格 ...

  9. iOS网络请求之multipart/form-data提交数据

    multipart/form-data表单数据 在http网络请求中,post没有请求长度的限制,因为post把数据放在了body中,而不是像Get一样放在了浏览器的地址栏中(可以这么理解), 所以相 ...

随机推荐

  1. Mysql 8.0 配置主从备份

    my.ini文件的位置 mysql 8.0安装完过后没有my.ini疑惑了我好久,最后发现,配置文件在,C盘的一个隐藏文件夹里面 具体路径如下图 主库配置 修改主库INI文件 在[mysqld]节点添 ...

  2. ArcGIS提取水系并进行生态敏感性分析

    1.前言 此前已经发表过一篇名为<ENVI提取水系并进行生态敏感性分析>的随笔,这篇是用ArcGIS进行水系提取,与前者的区别是上篇一般是对遥感影像进行处理,准确性较高:这篇是讲在没有遥感 ...

  3. Python:range、np.arange和np.linspace

    1. range range是python内置的一个类,该类型表示一个不可改变(immutable)的数字序列,常常用于在for循环中迭代一组特殊的数,它的原型可以近似表示如下: class rang ...

  4. Java案例——日期工具类

    需求:定义一个日期工具类,包含两个方法,按日期转化成指定格式的字符串,把字符串解析为指定格式的日期 然后定义一个测试类测试 分析: 1.定义一个日期工具类 2.定义一个方法dateToString,用 ...

  5. JavaScript this的理解

    一直对js的this不怎么理解,最近看了JavaScript 语言精髓的相关章节,有点清晰的理解了,记录记录 /* 来自: JavaScript 语言精髓 方法:当一个函数被定义为对象的一个属性时,我 ...

  6. Kafka02--Kafka生产者简要原理

    前言 在Kafka01--Kafka生产者使用方式中对KafkaProducer的基本使用方式进行了了解.以上只是使用方面,一个好的开元框架必定是易于开发者使用的,但是对生产者的基本逻辑流程和数据流转 ...

  7. 为什么Java中不支持多重继承?

    我发现这个 Java 核心问题很难回答,因为你的答案可能不会让面试官满意,在大多数情况下,面试官正在寻找答案中的关键点,如果你提到这些关键点,面试官会很高兴.在 Java 中回答这种棘手问题的关键是准 ...

  8. memcached 如何实现冗余机制?

    不实现!我们对这个问题感到很惊讶.Memcached 应该是应用的缓存层.它的设 计本身就不带有任何冗余机制.如果一个 memcached 节点失去了所有数据,您 应该可以从数据源(比如数据库)再次获 ...

  9. jpa CriteriaQueryNo explicit selection and an implicit one could not be determined

    java.lang.IllegalArgumentException: Error occurred validating the Criteria ... Caused by: java.lang. ...

  10. ReentrantLock 源代码之我见

    ReentrantLock,英文意思是可重入锁.从实际代码实现来说,ReentrantLock也是互斥锁(Node.EXCLUSIVE).与互斥锁对应的的,还有共享锁Node.SHARED Reent ...