如何将包含单个文件的FormData转换为JSON并通过Ajax发送？

嘿，你这段代码的核心问题在于FormData是专门用于传输表单/文件的特殊对象，不能直接用JSON.stringify()序列化——这么做之后你得到的其实是个空对象{}，后端自然接收不到文件。其实根本不需要转成JSON，Axios本身就支持直接发送FormData，这才是上传文件的标准姿势！

正确的实现代码 #

// 创建FormData实例并添加文件
const formData = new FormData();
formData.append('file', e.dataTransfer.files[0]);

// 直接发送FormData，无需转JSON
axios.post('my_route', formData, {
  // 备注：Axios其实会自动识别FormData并设置正确的Content-Type，这行可以省略，但写上更明确
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(response => {
  console.log('文件上传成功！', response.data);
})
.catch(error => {
  console.error('上传失败了', error);
});

为什么不能转JSON？ #

JSON是纯文本格式，没法直接存储二进制的文件数据。而multipart/form-data是HTTP协议专门为传输文件和表单数据设计的编码方式，FormData就是用来生成这种格式数据的工具，直接发送它才是正确的选择。

如果需要同时传JSON数据怎么办？ #

要是你除了文件，还得传其他JSON格式的参数，可以把JSON转成字符串后，作为FormData的一个字段添加进去：

const formData = new FormData();
formData.append('file', e.dataTransfer.files[0]);
// 把JSON对象转成字符串，作为普通字段添加
formData.append('extraInfo', JSON.stringify({ username: 'Axel', uploadTime: new Date() }));

axios.post('my_route', formData)
.then(...)

后端拿到后，只需要把extraInfo字段的字符串再转回JSON对象，同时处理file字段的文件就可以了。

内容的提问来源于stack exchange，提问作者Axel AMGHAR