### 解决方案 当遇到 `new FormData()` 的 `append` 方法无法正常插入数据的情况时，通常是因为以下几个原因： 1. **浏览器兼容性问题**：某些老旧浏览器可能不支持完整的 `FormData` API 功能[^1]。 2. **键名冲突**：如果多次使用相同的键名调用 `append` 方法，可能会覆盖或导致数据解析错误[^2]。 3. **请求头设置不当**：手动设置了 `Content-Type` 请求头可能导致服务器无法正确解析表单数据[^3]。 以下是具体的解决方案以及实现方法： #### 1. 遍历数组并逐项添加 对于需要将数组添加到 `FormData` 的场景，可以通过遍历数组并将每一项逐一通过 `append` 方法添加至 `FormData` 对象中。为了区分数组中的不同元素，可以为每个键加上索引编号作为后缀。 ```javascript const arr = ['上海', '北京']; const formData = new FormData(); for (let i = 0; i < arr.length; i++) { formData.append(`city[${i}]`, arr[i]); } ``` 这样，在服务器端接收到的数据会是一个带有索引的键值对集合，便于后续处理[^2]。 #### 2. 使用 JSON 字符串化对象或数组 另一种方式是将整个数组转换成 JSON 字符串后再通过 `append` 添加到 `FormData` 中。这种方式适用于复杂的嵌套结构或者不想在前端拆分数组的情况下。 ```javascript const arr = ['上海', '北京']; const formData = new FormData(); formData.append('cities', JSON.stringify(arr)); ``` 在服务器端接收时，需记得解码该字符串回原始数组形式[^1]。 #### 3. 正确配置 AJAX 请求头部 如果发现即使成功构建了 `FormData` 数据但在发送过程中仍然丢失，则可能是由于自定义了 HTTP 头部字段引起的。例如显式指定了 `'Content-Type'` 属性为固定值而非让浏览器自动推断 multipart 类型。 因此建议移除任何关于 content type 手动设定的部分: ```javascript const xhr = new XMLHttpRequest(); const formData = new FormData(); // 不要设置 Content-Type xhr.open('POST', '/your-endpoint'); xhr.send(formData); ``` 只有这样才能确保每次传输都携带正确的边界信息用于分割各个部分的内容[^3]。 --- ### 总结 综上所述，针对 `new FormData().append()` 方法无法插入数据的问题可以从三个方面入手解决：一是调整客户端代码逻辑以适配特定需求；二是注意操作系统的环境差异带来的影响；三是遵循标准协议来优化网络通信流程设计。