### 问题分析 在 JavaScript 中，`FormData` 是一种用于构建键值对的对象，通常用来模拟 HTML 表单提交的数据结构。当遇到 `append` 方法无法插入数据的情况时，可能的原因涉及以下几个方面： 1. **浏览器兼容性问题**：某些旧版浏览器可能存在对 `FormData` 的支持不完全。 2. **语法错误**：调用 `append` 方法时参数设置不当可能导致数据未被正确添加。 3. **网络请求配置问题**：如果在网络请求中手动设置了 `Content-Type` 头部，则可能会干扰默认的 multipart 数据传输机制。 以下是针对该问题的具体原因及解决方案。 --- ### 解决方案 #### 1. 浏览器兼容性检查 确保目标环境支持 `FormData` 和其方法 `append`。对于较老版本的浏览器（如 IE），可能需要额外处理或使用 polyfill 来补充功能[^1]。 ```javascript if (window.FormData) { console.log("当前浏览器支持 FormData"); } else { console.error("当前浏览器不支持 FormData，请升级浏览器或使用 polyfill"); } ``` #### 2. 正确调用 `append` 方法 `append` 方法的第一个参数是字段名，第二个参数是要附加的值。如果要附加上述引用中的数组，可以通过循环逐一附加每一项[^2]。 ```javascript const arr = ['上海', '北京']; const formData = new FormData(); for (let i = 0; i < arr.length; i++) { formData.append('city[]', arr[i]); // 使用 city[] 可以让服务器识别为数组 } // 或者更简洁的方式 arr.forEach(city => formData.append('city[]', city)); ``` 注意：这里将字段名称设为 `'city[]'` 而非简单的 `'city'`，以便于服务器端能够解析成数组形式。 #### 3. 避免手动设置 `Content-Type` 在通过 AJAX 提交 `FormData` 时，不应手动指定 `Content-Type` 属性。因为浏览器会自动生成合适的边界字符串并将其作为头部的一部分发送给服务器[^3]。 错误示例： ```javascript xhr.setRequestHeader('Content-Type', 'multipart/form-data'); ``` 正确做法： ```javascript const xhr = new XMLHttpRequest(); const formData = new FormData(); formData.append('key', 'value'); xhr.open('POST', '/upload', true); xhr.send(formData); // 不需显式设置 Content-Type ``` #### 4. 后台框架特殊行为 部分后台框架（如 ThinkPHP5）可能存在文件上传或其他方面的 Bug，在实际开发过程中需要注意测试稳定性[^4]。如果发现前后端交互异常，建议排查以下几点： - 文件大小是否超出限制； - 是否存在跨域问题； - Session 过期是否影响正常流程。 --- ### 总结 综上所述，`FormData` 的 `append` 方法无法插入数据的主要原因是由于操作方式不当或者外部因素干扰所致。按照上述调整后应可解决问题。 --- ###