通常在收集表单的时候我们都要涉及到绑定上传附件,这时候就可以用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. Windows 下 MySQL 简单定时自动备份、删除过期备份

    Windows 下 MySQL 简单定时自动备份.删除过期备份 MySQL Workbench 客户端虽然好用,但并不提供自动备份功能.手工备份,确实繁琐. 新建一个 数据库备份文件存放目录,本例为D ...

  2. Go 1.18 最强代码自测方法!

    特别说明:这个真的不是标题党,我写代码20+年,真心认为 go fuzzing 是我见过的最牛逼的代码自测方法.我在用 AC自动机 算法改进关键字过滤效率(提升~50%),改进 mapreduce 对 ...

  3. SpringBoot学习入门之Hello项目的构建、单元测试和热部署等(配图文,配置信息详解,附案例源码)

    前言: 本文章主要是个人在学习SpringBoot框架时做的一些准备,参考老师讲解进行完善对SpringBoot构建简单项目的学习汇集成本篇文章,作为自己对SpringBoot框架的总结与笔记. 你将 ...

  4. LGP2891题解

    题目大意 有 \(n\) 只奶牛,\(q\) 种食物和 \(p\) 种饮料,每只奶牛喜欢一些饮料和食物,但只能那一种,求最小配对数量. 首先来看一下这道题的简化版:没有饮料,该怎么做呢? 我会!裸的二 ...

  5. CVE-2018-12613phpMyAdmin 后台文件包含漏洞分析

    一.    漏洞背景 phpMyAdmin 是一个以PHP为基础,以Web-Base方式架构在网站主机上的MySQL的数据库管理工具,让管理者可用Web接口管理MySQL数据库.借由此Web接口可以成 ...

  6. Flink消费kafka

    Flink消费Kafka https://blog.csdn.net/boling_cavalry/article/details/85549434 https://www.cnblogs.com/s ...

  7. 《前端运维》一、Linux基础--09常用软件安装

    一.软件包管理 RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的"添加/删除程序".软件包有几种类型,我们一起来看下: 源 ...

  8. java继承:extends

    继承:extends 1.java只支持单继承,不支持多继承 2.java支持多层继承(继承体系) 3.子类不能继承父类所有非私有的成员(成员方法和成员变量) 4.子类不能继承父类的构造方法,但是可以 ...

  9. Zookeeper 对于 Kafka 的作用是什么?

    Zookeeper 是一个开放源码的.高性能的协调服务,它用于 Kafka 的分布式应用. Zookeeper 主要用于在集群中不同节点之间进行通信 在 Kafka 中,它被用于提交偏移量,因此如果节 ...

  10. 如何确保消息正确地发送至 RabbitMQ?如何确保消息接收方消费了消息?

    发送方确认模式 将信道设置成 confirm 模式(发送方确认模式),则所有在信道上发布的消息都会被指派一个唯一的 ID.一旦消息被投递到目的队列后,或者消息被写入磁盘后(可持久化的消息),信道会发送 ...