FormData的概念

294 阅读1分钟

概念

  • 概念:FormData 是浏览器提供的一个 WebAPI,它以键值对的方式存储数据。
  • 作用:FormData 配合 Ajax 技术,能够向服务器发送 multipart/form-data 格式的请求体数据。
  • 场景:FormData + Ajax 技术实现文件上传的功能。
  • 注意:Ajax 实现文件上传的时候,请求体的编码格式必须是 multipart/form-data。

基本用法

FormData 是一个构造函数,new FormData() 即可得到 FormData 对象:

const  fd  =  new  FormData()  // 创建一个空白的 FormData 对象,里面没有包含任何数据。	

调用 FormData 对象的 append(键, 值) 方法,可以向空白的 FormData 中追加键值对数据,其中:

// 键表示数据项的名字,必须是字符串
// 值表示数据项的值,可以是任意类型的数据
fd.append('username', '张三') // 键是 username,值是字符串类型
fd.append('age', 20)         // 键是 age,           值是数字类型
fd.append('avatar', 图片文件)  // 键是 avatar,       值是文件类型

发送普通的 FormData 数据

// 创建
const fd = new FormData() ;
// 添加
fd.append('username', '张三') // 键是 username,值是字符串类型
fd.append('age', 20)         // 键是 age,           值是数字类型
fd.append('avatar', 图片文件)  // 键是 avatar,       值是文件类型
// 使用
$('#btn').on('click', function (){
    axios.post('端口', fd).then(({data: res}) => {
        console.log(res);
    });
})