### 如何使用 FormData 格式发送 POST 请求 当需要以 `multipart/form-data` 或者 `application/x-www-form-urlencoded` 的格式发送 HTTP POST 请求时，可以利用 JavaScript 中的 `FormData` 对象来构建请求体。下面是一个详细的例子展示如何创建并发送带有文件和其他字段的表单数据。 #### 使用 XMLHttpRequest 发送带文件上传的 POST 请求 ```javascript // 创建一个新的 XMLHttpRequest 实例 var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://example.com/api/upload'); // 初始化 FormData 对象 var formData = new FormData(); // 添加文本字段到 FormData formData.append('username', 'JohnDoe'); formData.append('description', 'This is a test file.'); // 向 FormData 中添加文件 const fileInput = document.querySelector('input[type="file"]'); if (fileInput.files.length > 0) { const file = fileInput.files[0]; formData.append('profilePic', file); } // 设置响应类型的处理逻辑 xhr.onload = function () { console.log(this.responseText); // 处理服务器返回的结果 }; xhr.onerror = function () { console.error('An error occurred while making the request.'); }; // 发送请求并将 FormData 作为主体内容 xhr.send(formData)[^4]; ``` #### 利用 Fetch API 和 Axios 库实现相同功能 ##### 使用 Fetch API Fetch 提供了一个更现代化的方法来进行网络操作，并且支持 Promise 风格编程： ```javascript async function uploadFileUsingFetch() { try { let response = await fetch('https://example.com/api/upload', { method: 'POST', body: prepareFormData() }); if (!response.ok) throw Error(response.statusText); let result = await response.json(); console.log(result); } catch(error){ console.error('Error during fetching:', error.message); } } function prepareFormData(){ var formData = new FormData(); formData.append('username', 'JaneSmith'); formData.append('bio', 'A brief biography here...'); const selectedImage = document.getElementById('imageUploader').files.item(0); if(selectedImage !== null){ formData.append('avatar', selectedImage); } return formData; } ``` ##### 使用 Axios 库 Axios 是一个基于 promise 的 HTTP 客户端库，它简化了 AJAX 调用过程中的许多方面： ```javascript import axios from 'axios'; function sendPostRequestWithAxios() { const formData = new FormData(); formData.append('title', 'My Title'); formData.append('content', 'Some content goes here...'); // 如果要上传文件，则像这样附加文件 const imageField = document.querySelector('#photoUpload input[type=file]'); if(imageField.files && imageField.files.length>0){ formData.append('uploadedPhoto', imageField.files[0]); } axios({ url: '/api/post/create', method: 'post', data: formData, headers: {'Content-Type': 'multipart/form-data'} }) .then(function (response) { console.log(`Success! Server responded with ${JSON.stringify(response.data)}`); }) .catch(function (error) { console.warn(`Failed to post due to ${error}`); })[^3]; } ```