使用React Native Debugger进行axios的multipart/form-data 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]

User Agent: 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进行测试的步骤。

- Dan

---

你能解决它吗？ - Reyansh Mishra

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。此外，请插入您自己的表单数据和URL。检查请求（已成功回复），这是我收到的请求头：

- JMA

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

- Raul Ruiz

---

getHeaders()在FormData类型中不可用作方法。 - Jonathan

Answer 3

你可以简单地这样做： axios.defaults.headers.common['Content-Type'] = 'multipart/form-data; boundary=someArbitraryUniqueString'; 它会确保设置你的头部。然而，我已经在React Native中为表单数据苦苦挣扎了一整天，但没有成功。经过一些实验性的尝试，我发现在没有调试器的情况下一切都正常。我不知道为什么，但是使用调试器时，我一直发送空的主体到服务器。

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

- Marcin Sadowski

Answer 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 是发送 POST 请求到 ROUTE 的函数。

- Константин Ушаков