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