通过 axios 在响应本机和 Web 上的标头中设置不同的 Content-Type

Posted 2023-03-10

【中文标题】通过 axios 在响应本机和 Web 上的标头中设置不同的 Content-Type

【英文标题】：Different Content-Type set in header in react native and on the web by axios

【发布时间】：2019-03-21 03:16:58

【问题描述】：

我尝试使用以下示例代码在 react-native 和 web 上使用 axios 上传文件

const obj = 
            hello: "world"
        ;

const json = JSON.stringify(obj);

const blob = new Blob([json], 
        type: 'application/json'
        );

const data = new FormData();

data.append("document", blob);

axios(
  url: 'SOME_URL',
  method: 'POST',
  headers:...
            ,
  data: data
 )
 .then(res => console.log(res))
 .catch(res =>  console.log(res))

在 react-native 上，它将内容类型设置为“text/plain”，但是当我在网络上尝试时，它将正确的内容类型设置为“multipart/form-data”。

我尝试设置 Content-Type : 'multipart/form-data' 但它仍然在 react-native 中恢复为 text/plain。

我确实关注了这个链接 sending file and json in POST multipart/form-data request with axios 但它不适用于 react-native

任何人都可以帮助如何在 react-native 中上传文件和 json 吗？

【参考方案1】：

在这里，您可以将键值对和对象添加到 FormData 对象中。在您的情况下，data。根据您的问题，您需要 puta 文件和 json 文件。

所以你可以像这样添加你的文件。

data.append('you_file_input_tag_name', formFile);

你可以像下面这样再次将你的 json 添加到这个数据对象中。想象一下，您的 json 对象位于名为 myjson

的变量名中

var stringifiedDetail = JSON.stringify(myjson);
data.append('details', stringifiedDetail);