Axios为什么不支持FormData？

clj7thdc 于 2023-01-13 发布在 iOS

关注(0)|答案(3)|浏览(238)

我在一个Vue.js项目中使用Axios & FormData向服务器发送数据，以前它可以工作，但是现在，每当我发送一个formData对象时，它似乎没有被附加：
模拟服务器：

Chrome开发工具：

（注意content-length为2且缺少FormData）

let url = "https://benben.free.beeceptor.com/1"
    const fd = new FormData()
    fd.append('key', 'value')
    return axios.post(url, fd, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })

我尝试过的事

1.在以下位置查找有效负载：chrome/firefox/edge开发工具和模拟服务器。
1.发送简单的JSON而不是FormData -它工作。
1.发送时带标头和不带标头-不会更改任何内容。
1.检查数据是否成功附加到FormData-成功（键-值存在）。
1.尝试了其他Stackoverflow解决方案，到目前为止没有任何效果。
1.更新axios。
1.使用直接的axios API（将对象传递给axios）。

**注意：**我需要FormData，因为我需要上载文件。

如果有任何其他代码示例会有帮助，请告诉我。
先谢了！

axios

来源：https://stackoverflow.com/questions/66883512/why-does-axios-not-working-with-formdata

3条答案

按热度按时间

zu0ti5jz1#

我已经弄明白了--我正在使用snakecaseKeys包在发送之前操作数据。它似乎不适合使用FormData对象。

import snakecaseKeys from 'snakecase-keys'
axios.defaults.transformRequest = [(data) => {
    if (data) {
        return snakecaseKeys(data, { deep: true })
    }
}, ...axios.defaults.transformRequest]

谢谢大家的评论！

赞(0）回复(0）举报 2023-01-13

cnh2zyt32#

如果其他人遇到这个问题，您可以使用instanceof避开transformRequest中的转换。

transformRequest: [
    (data) => {
      if (data instanceof FormData) return data;
      // otherwise, transform your data
      return transformedData;
    },
  ],

赞(0）回复(0）举报 2023-01-13

vfh0ocws3#

在React中，表单还应具有encType=“multipart/form-data”属性，是否也适用？

赞(0）回复(0）举报 2023-01-13