通过 React Native Debugger 使用 multipart/form-data 发出 axios POST 请求答案

【问题标题】：Making an axios POST request with multipart/form-data, via React Native Debugger通过 React Native Debugger 使用 multipart/form-data 发出 axios POST 请求
【发布时间】：2017-12-18 18:50:16
【问题描述】：

我正在尝试将文件从 React Native 上传到我的服务器。但是我无法将'Content-Type' 标头设置为multipart/form-data。

这是我的简单要求：

axios({
  uri: 'http://localhost:3000',
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data'
  }
});

我正在使用 React Native Debugger 来监控网络请求。

当我在调试器中看到我的网络请求时，我看到了：

'Content-Type': 'text/plain;charset=UTF-8'

请求有效负载只是[object Object]

用户代理： Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) ReactNativeDebugger/0.7.13 Chrome/58.0.3029.110 Electron/1.7.9 Safari/537.36

如果我无法使用 React Native 调试器执行此操作，任何人都可以建议任何通过 Expo 进行测试的步骤。

【问题讨论】：

你解决了吗？

标签： multipartform-data axios

【解决方案1】：

使用最新版本的 Axios (0.17.1)，您发出 HTTP 请求，标头中包含 'Content-Type': 'multipart/form-data'，如下所示：

const formData = new FormData();
formData.append('action', 'ADD');
formData.append('param', 0);
formData.append('secondParam', 0);
formData.append('file', new Blob(['test payload'], {
  type: 'text/csv',
}));
axios({
  url: 'http://localhost:5000/api/hello',
  method: 'POST',
  data: formData,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
  },
});

两件事：我使用的是url，而不是uri。另外，请插入您自己的表单数据和网址。检查已成功回复的请求，这是我得到的请求标头：

【讨论】：

【解决方案2】：

经过数小时的努力，我意识到multipart/form-data 需要一个根据发送的数据量动态生成的边界。

下面是适合我的代码：

    const data = new FormData();
    data.append('field_name', 'field_pictures');
    data.append('files[file]', fs.createReadStream(filepath), filename);
    const headers = {
        'Content-Type': 'multipart/form-data',
        'Authorization': 'here you can set your headers',
        ...data.getHeaders() // this line is the key
        // you need to mix your headers with those generated by the form data
    }
    return axios.post(url, data, { headers });

【讨论】：

getHeaders() 不能作为 FormData 类型的方法使用

【解决方案3】：

您可以这样做： axios.defaults.headers.common['Content-Type'] = 'multipart/form-data; boundary=someArbitraryUniqueString';

它肯定会设置您的标题。但是，我在 React Native 中苦苦挣扎了一天，但没有成功。经过一些实验后，我发现无需调试器一切正常。我不知道为什么，但是使用调试器时，我一直在向服务器发送空正文。

更重要的是我不需要设置标题，因为这是你在这篇文章中的问题。

【讨论】：

【解决方案4】：

根据@JMA 的回答，

import axios from 'axios';

export async function somefunction(data) {
    const formData = new FormData(); // No imports needed
    for(let key in userData) {
        formData.append(key.toString(), data[key].toString())
    }
    return axios.post(`${ROUTE}`, formData, {
        'Content-Type': 'multipart/form-data',
    });
}

其中：data 是您要发送的有效负载。 somefunction 是向ROUTE 发送 POST 请求的函数。

【讨论】：