【Vue工作随笔】前端FormData的使用 初识==＞理解

这时我才意识到还有formData这种传参的类型。我开始研究formData

---

阅读链接：FormData - Web API 接口参考 | MDN

知识点

---

FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式，并且可以轻松的将数据通过XMLHttpRequest.send()") 方法发送出去

FormData.append()")  向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是新增一个值，如果属性不存在则新增一项属性值。

FormData.delete()")  从 FormData 对象里面删除一个键值对。

看起来比较简单，就是需要新建一个formData类型的数据对象，然后为其添加值，之后的接口传参没有什么大的区别。

const formData = new FormData()

formData.append('zipFile', param.file)

formData.append('activityId', this.activityId)

console.log(formData)

但是当我打印添加好属性的formData时，我才意识到事情的不简单，我乍一看还以为是空对象。但是根本找不到刚才添加的属性去哪了？

学习链接：FormData使用方法详解 - 简书

FormData用法详解_叶落无痕的博客-CSDN博客_formdata

---

之后我开始了百度学习

1. FormData主要用途

---

（1）将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。

（2）异步上传文件

2. FormData对象简单操作

---

（1）创建对象并添加键值对

//通过FormData构造函数创建一个空对象

var formdata=new FormData();

//可以通过append()方法来追加数据

formdata.append("name","laotie");

（2）读取数据 & 修改数据

通过get(key)与getAll(key)来获取相对应的值   通过set(key, value)来设置修改数据

//通过get方法对值进行读取

console.log(formdata.get("name"));//laotie

//通过set方法对值进行设置

formdata.set("name","laoliu");

console.log(formdata.get("name"));//laoliu

（3） 获取所有数据

通过append(key,value)在数据末尾追加数据

//通过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu");

//通过append()方法在末尾追加key为name值为laoli的数据

formdata.append("name","laoli");

//通过append()方法在末尾追加key为name值为laotie的数据

formdata.append("name","laotie");

//通过get方法读取key为name的第一个值

console.log(formdata.get("name"));//laoliu

//通过getAll方法读取key为name的所有值

console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]

（4） 判断是否含有数据

---

通过has(key)来判断是否存在对应的key值

//通过FormData构造函数创建一个空对象

var formdata=new FormData();

//通过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu");

//判断是否包含key为name的数据

console.log(formdata.has("name"));//true

//判断是否包含key为age的数据

console.log(formdata.has("age"));//false

（5）删除数据

---

通过delete(key)可以删除数据

//通过FormData构造函数创建一个空对象

var formdata=new FormData();

//通过append()方法在末尾追加key为name值为laoliu的数据

formdata.append("name","laoliu");

console.log(formdata.get("name"));//laoliu

//删除key为name的值

formdata.delete("name");

console.log(formdata.get("name"));//null

（6）通过表单对formData进行初始化

---

<form id="advForm">

    <p>广告名称：<input type="text" name="advName"  value="xixi"></p>

    <p>广告类别：<select name="advType">

        <option value="1">轮播图</option>

        <option value="2">轮播图底部广告</option>

        <option value="3">热门回收广告</option>

        <option value="4">优品精选广告</option>

    </select></p>

    <p><input type="button" id="btn" value="添加"></p>

</form>

//获得表单按钮元素

var btn=document.querySelector("#btn");

//为按钮添加点击事件

btn.onclick=function(){

    //根据ID获得页面当中的form表单元素

    var form=document.querySelector("#advForm");

    //将获得的表单元素作为参数，对formData进行初始化

    var formdata=new FormData(form);

    //通过get方法获得name为advName元素的value值


### 总结

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。



=function(){

    //根据ID获得页面当中的form表单元素

    var form=document.querySelector("#advForm");

    //将获得的表单元素作为参数，对formData进行初始化

    var formdata=new FormData(form);

    //通过get方法获得name为advName元素的value值


### 总结

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。



![](https://img-blog.csdnimg.cn/img_convert/94e687c31e14b839f78191b91adcfcdf.webp?x-oss-process=image/format,png)