### 解决方案 在使用 `FormData` 时，如果一个键（key）对应多个值（例如上传多个文件），可以通过 `getAll()` 方法获取该键的所有值。然而，`FormData` 的默认方法如 `get()` 只会返回第一个匹配的值[^2]。因此，为了获取所有值，必须明确调用 `getAll()` 方法。 以下是一个示例代码，展示如何通过 `FormData` 获取键的所有值： ```javascript // 初始化 formData 对象 var formData = new FormData(); // 添加多个同名字段 formData.append("files", new Blob(["file1 content"], { type: "text/plain" })); formData.append("files", new Blob(["file2 content"], { type: "text/plain" })); // 使用 getAll() 获取所有值 var allFiles = formData.getAll("files"); // 输出所有值 allFiles.forEach((file, index) => { console.log(`File ${index + 1}:`, file); }); ``` 在上述代码中，`append()` 方法用于向 `FormData` 中添加多个具有相同键的值。随后，`getAll()` 方法可以获取该键对应的所有值。 ### 文件上传场景中的应用 当使用 `FormData` 上传文件时，特别是多文件上传场景，可以通过以下方式确保获取所有文件并正确上传： ```javascript // 假设用户选择了多个文件 var input = document.getElementById("fileInput"); // 获取文件输入框 var files = input.files; // 获取选中的文件列表 // 将文件添加到 formData 中 var formData = new FormData(); for (var i = 0; i < files.length; i++) { formData.append("files", files[i]); // 同一 key 添加多个文件 } // 使用 AJAX 提交 formData fetch("/upload", { method: "POST", body: formData, }) .then(response => response.json()) .then(data => console.log("Success:", data)) .catch(error => console.error("Error:", error)); ``` 在此示例中，`files` 是一个 `FileList` 对象，表示用户选择的多个文件。通过循环将每个文件添加到 `FormData` 中，并使用相同的键名（如 `"files"`）。最终，服务器端可以接收到所有文件[^4]。 ### 注意事项 - 如果需要清空 `FormData` 中的内容，可以通过重新实例化对象实现。例如：`formData = new FormData();`[^4]。 - 在 Vue.js 环境中，可以通过监听 `change` 事件捕获用户选择的文件，并将其添加到 `FormData` 中[^4]。 ###