FormData详细使用教程 📝

导读 在日常开发中,`FormData` 是一个非常实用的对象,主要用于处理表单数据,尤其是需要通过 `POST` 或 `PUT` 方法上传文件的场景。它能...
2025-03-13 04:36:04

在日常开发中,`FormData` 是一个非常实用的对象,主要用于处理表单数据,尤其是需要通过 `POST` 或 `PUT` 方法上传文件的场景。它能轻松地将键值对或文件数据组合成适合传输的形式,让前端与后端的数据交互更加顺畅。

首先,创建一个 `FormData` 对象非常简单:只需调用 `new FormData()` 即可。例如,`const formData = new FormData();`。接着,你可以通过 `.append(key, value)` 方法向其中添加数据。如果是要上传文件,可以直接传入文件输入框的值,比如 ``,然后用 `formData.append('file', fileInput.files[0]);` 来添加文件。

在发送请求时,记得设置请求头为 `Content-Type: multipart/form-data;`,并使用 `fetch` 或 `XMLHttpRequest` 发送数据。例如:

```javascript

fetch('/upload', {

method: 'POST',

body: formData,

});

```

利用 `FormData`,你可以高效地管理复杂的数据结构,无论是文本还是文件,都能轻松搞定!🚀

免责声明:本文由用户上传,如有侵权请联系删除!