《FormData 的使用详解》

xiaoNan5153

于 2024-08-18 10:26:47 发布

阅读量238

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/l_56z/article/details/141293651

版权

在前端开发中，FormData 是一个非常实用的对象，用于轻松创建和处理表单数据，以便进行表单的提交和数据的发送。

一、什么是 FormData

FormData 接口提供了一种方便的方式来构造一组键值对，其中的键值可以是字符串或 Blob（二进制大对象）等类型的数据。这使得它特别适合用于表单数据的处和 XMLHttpRequest 或 fetch API 的数据发送。

二、创建 FormData 对象

直接创建一个新的空对象：

let formData = new FormData();

三、向 FormData 对象添加数据

可以使用 append() 方法向 FormData 对象添加数据。例如

let formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('age', 25);
formData.append('file', fileInput.files[0]);

四、使用 FormData 发送数据

    axios('https://www.mocky.io/v2/5cc8019d300000980a055e76', {
        method: 'post',
        data: formData,
    }).then(() => {
        fileList.value = [];
        uploading.value = false;
        message.success('upload successfully.');
    }).catch(() => {
        uploading.value = false;
        message.error('upload failed.');
    });

五、查看接口携带的数据