通常在收集表单的时候我们都要涉及到绑定上传附件,这时候就可以用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. laravel报错 : No application encryption key has been specified.

    创建了新的laravel项目后, 运行提示:No application encryption key has been specified 解决方法: 这个是由于没有配置好 APP_KEY 在终端上 ...

  2. LGP3726题解

    确实牛逼......这个转化我反正肯定想不到... 考虑 \(a=b\) 的情况.发现出了平局之外都是一半赢一半输.可以得到此时的答案为: \[\frac{2^{a+b}-\sum_{i=0}^{a} ...

  3. LGP5089题解

    考试的一道题,考场上sb了没写出来,然后在两天后的英语课上胡出来了( 首先猜一个奇怪的结论: 对于元素 \((a,b)\),看做连接第 \(a\) 列和第 \(b\) 行的一条边,那么如果一行和一列在 ...

  4. vue3-组件中使用setup函数获取vuex中的数据的新方式

    传统方式 setup() { const store = useStore() //传统方式 const aName = computed(() => store.state.name) ret ...

  5. Java的浅克隆和深克隆

    如何实现对象的克隆 (1)实现 Cloneable 接口并重写 Object 类中的 clone() 方法: (2)实现 Serializable 接口,通过对象的序列化和反序列化实现克隆,可以实现真 ...

  6. 【Mybatis】SQL语句的解析执行过程原理

    sqlSession简单介绍 拿到SqlSessionFactory对象后,会调用SqlSessionFactory的openSesison方法,这个方法会创建一个Sql执行器(Executor),这 ...

  7. Linux 的目录结构是怎样的?

    这个问题,一般不会问.更多是实际使用时,需要知道.Linux 文件系统的结构层次鲜明,就像一棵倒立的树,最顶层是其根目录:Linux的目录结构常见目录说明: /bin:存放二进制可执行文件(ls,ca ...

  8. Chroot 特性 ?

    3.2.0 版本后,添加了 Chroot 特性,该特性允许每个客户端为自己设置一个命名 空间.如果一个客户端设置了 Chroot,那么该客户端对服务器的任何操作,都将 会被限制在其自己的命名空间下. ...

  9. jQuery--选择器案例实战

    1.案例需求 jquery最基础的选择器部分已经基本结束,来一个简单案例总结回顾下学的东西. 案例需求: 用一个按钮控制元素的显示与隐藏,页面如下,从第五个开始,不要最后一个,控制他们的显示和隐藏. ...

  10. java中的函数式接口

    是什么?? 有且只有一个抽象方法的接口 场景: 适用于函数式编程场景(使用lambda表达式编程)的接口,函数式接口可以适用于lambda使用的接口. 只有确保接口中有且只有一个抽象方法,java中的 ...