通过React Native Debugger使用multipart / form-data创建axios POST请求

Question

我正在尝试将文件从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 Debugger执行此操作，任何人都可以建议通过Expo进行测试的任何步骤。

Answer 1

使用最新版本的Axios（0.17.1），您在标题中发出'Content-Type': 'multipart/form-data'的HTTP请求，如下所示：

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。另外，请插入您自己的表单数据和网址。检查已成功回复的请求，这是我获取请求标头的内容：

Answer 2

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

它会确定您的标题。但是，我一直在使用React Native中的表单数据奋斗一天而没有成功。经过一些实验性的批评，我发现一切都可以没有调试器。我不知道为什么但是使用调试器，我一直在向服务器发送空体。

还有什么我不需要设置标题，因为这是你在这篇文章中提出的问题。

Answer 3

经过数小时的努力，我意识到多部分/表单数据需要一个边界，该边界是根据发送的数据量动态生成的。这是对我有用的代码：

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 });