文件放在 FormData 中，其他参数放在 body 中

### 使用 FormData 对象发送文件并在 Body 中包含其他参数当需要同时上传文件和其他表单数据时，可以利用 `FormData` 对象来构建请求体。这种方式适用于多种编程环境下的 HTTP 请求操作。 #### 构建 FormData 并发起 POST 请求创建 `FormData` 实例后，可以通过调用其 `append()` 方法依次加入不同类型的字段值，既支持二进制大对象（如图片），也兼容普通的字符串型键值对： ```javascript let formData = new FormData(); formData.append('file', fileInput.files[0]); // 假设有一个<input type="file">元素用于选择要上传的文件 formData.append('username', 'exampleUser'); formData.append('description', 'This is a test upload.'); ``` 对于较为复杂的结构化数据，则可先将其序列化成 JSON 字符串再追加进去： ```javascript formData.append("videoeditform", JSON.stringify(videoEditForm)); ``` 最后借助 Axios 或 Fetch API 完成实际的数据传输过程[^1]： ```javascript // 使用Axios库的例子 const response = await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); console.log(response.data); ``` 需要注意的是，在设置请求头时应指定正确的 MIME 类型——即 `"multipart/form-data"` 而非默认的 `"application/x-www-form-urlencoded"` ，这样才能确保服务器端能够正确解析接收到的内容[^3]。另外，如果是在 Spring Boot 应用程序中接收此类请求的话，可能还需要额外配置一些细节以保证 MultipartFile 参数能被正常识别[^4]；而在 C# WebAPI 场景下同样要注意调整模型绑定逻辑以便于处理混合负载的情况[^5]。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考

下一篇用opencv实现图像识别，并用红框圈出识别结果并显示