FoemData

FormData是浏览器提供的内置对象.
以key/value的形式保存数据
能够结合ajax进行数据提交

常用语法

// 实例化时传入Form表单 自动获取数据
const data = new FormData(form表单)
// 直接输出看不到数据
console.log(data)
// 通过get方法获取对应的值
console.log(data.get('username')) 
console.log(data.get('email'))
console.log(data.get('habbit'))

// 添加键值对
data.append('friend','jack')
console.log(data.get('friend')) // jack

通过new关键字实例化
.append(key,value)添加数据
.get(key)获取key对应的值
可以保存文件

FormData-头像上传

<body>
    <input type="file" name="" id=""  accept="image/*"> 
    <br>
    <img src="" alt="">
    <button>上传</button>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const ipt = document.querySelector('input')
        const img = document.querySelector('img')
        const btn = document.querySelector('button')
       
        btn.addEventListener('click', function(){
    // 检查输入框(ipt)的值是否为空
    if(!ipt.value) return alert('上传为空！');

    // 输出第一个文件对象
    console.log(ipt.files[0]);

    // 创建一个FormData对象
    let data = new FormData();

    // 将文件对象添加到FormData对象中，使用名为"avatar"的键
    data.append('avatar', ipt.files[0]);

    // 输出FormData对象中名为"avatar"的值，即文件对象
    console.log(data.get('avatar'));
    // 使用axios库发送POST请求
    axios({
        url: 'http://ajax-api.itheima.net/api/file', // 请求的URL
        method: 'post', // 请求方法为POST
        data: data // 请求的数据为FormData对象
    }).then(res => {
        // 打印请求响应结果
        console.log(res);
        // 将响应中的data.url赋值给img元素的src属性
        img.src = res.data.data.url;
    });
});
    </script>

FormData对象常用的方法有：

append(name, value): 将一个键值对添加到表单中，其中name表示键，value表示值。
delete(name): 从表单中删除指定名称的键值对。
get(name): 获取指定名称的值。
getAll(name): 获取指定名称的所有值。
has(name): 检查表单中是否存在指定名称的键值对。
set(name, value): 设置指定名称的值，如果存在则更新，否则添加新的键值对。