Javascript 从react以多部分形式将csv文件发送到服务器

我有一个CSV文件，我需要发布到API。我需要从React以多部分发送此文件。我尝试过通过

fetch（）

方法发送此文件，正如其他教程和网站所建议的那样，这些教程和网站显示了如何将文件发送到服务器

我面临的问题是，我的RESTAPI需要在头中使用授权令牌，并且建议在发送多部分请求时，最好让浏览器为您设置头，而不是自己创建头

export const authPostFile = (url, formData) => {
  return fetch(url, {
    method: "POST",
    body: formData,
    headers: {
      Authorization: `Bearer MY-CUSTOM-AUTH-TOKEN`
    }
  }).then(res => {
    if (res.ok) {
      return res.json();
    } else {
      if (res.status === 401) 
        return renewAuthToken(authPost, url, formData);
     else 
       return handleErrorResponse(res);
    }
  });
};

---

我得到了401的答复。我不熟悉ReactJS和UI开发。这里缺少什么吗？

向

fetch（）

请求添加标题时，需要使用

headers

对象，而不是普通对象。试试这个：

export const authPostFile = (url, formData) => {
  let authHeader = new Headers({
    "Authorization": `Bearer MY-CUSTOM-AUTH-TOKEN`
  });

  return fetch(url, {
    method: "POST",
    body: formData,
    headers: authHeader 
  }).then(res => {
    if (res.ok) {
      return res.json();
    } else {
      if (res.status === 401) 
        return renewAuthToken(authPost, url, formData);
     else 
       return handleErrorResponse(res);
    }
  });
};

---

有关

标题的详细信息，请参阅。
向
fetch（）
请求添加标题时，您需要使用
Headers
对象，而不是普通对象。试试这个：

export const authPostFile = (url, formData) => {
  let authHeader = new Headers({
    "Authorization": `Bearer MY-CUSTOM-AUTH-TOKEN`
  });

  return fetch(url, {
    method: "POST",
    body: formData,
    headers: authHeader 
  }).then(res => {
    if (res.ok) {
      return res.json();
    } else {
      if (res.status === 401) 
        return renewAuthToken(authPost, url, formData);
     else 
       return handleErrorResponse(res);
    }
  });
};

有关
标题的详细信息，请参阅。
“发送多部分请求时，让浏览器为您设置标题，而不是自己创建标题”-这适用于
内容类型
标题，因为这需要包括用于分隔请求正文内各部分的边界；这并不意味着您不能自己指定其他标题。您能在浏览器开发工具中检查请求头的实际外观吗。当时我没有抓住关键点。我做了您和@Rory McCrossan建议的更改，现在我的请求头看起来像：---WebKitFormBoundarypkQdC3A3LA1tdpan内容处置：表单数据；name=“file”；filename=“sample（85）.csv”内容类型：application/vnd.ms-excel-----WebKitFormBoundarypkQdC3A3LA1tdpan--它似乎是多部分请求的主体，而不是标题。哦，我的错。它看起来像：authorization:Bearer MY-CUSTOM-AUTH-TOKEN内容类型：multipart/form data；boundary=---WebKitFormBoundaryk0ApRdhgzQk6mWRz来源：Referer:用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，如Gecko）Chrome/73.0.3683.86 Safari/537.36“发送多部分请求时，让浏览器为您设置头，而不是自己创建”-这适用于
内容类型
标题，因为它需要包括用于分隔请求主体内部各部分的边界；这并不意味着您不能自己指定其他标题。您能在浏览器开发工具中检查请求头的实际外观吗。当时我没有抓住关键点。我做了您和@Rory McCrossan建议的更改，现在我的请求头看起来像：---WebKitFormBoundarypkQdC3A3LA1tdpan内容处置：表单数据；name=“file”；filename=“sample（85）.csv”内容类型：application/vnd.ms-excel-----WebKitFormBoundarypkQdC3A3LA1tdpan--它似乎是多部分请求的主体，而不是标题。哦，我的错。它看起来像：authorization:Bearer MY-CUSTOM-AUTH-TOKEN内容类型：multipart/form data；boundary=----WebKitFormBoundaryk0ApRdhgzQk6mWRz来源：Referer:用户代理：Mozilla/5.0（Windows NT 10.0；Win64；x64）AppleWebKit/537.36（KHTML，类似Gecko）Chrome/73.0.3683.86 Safari/537.36谢谢。这解决并澄清了问题。因此接受了这个答案。在将前端代码更改为@Rory McCrossanThanks建议的代码后，服务器端出现了一个故障，导致了问题。这解决并澄清了问题。因此接受了这个答案。在将前端代码更改为@Rory McCrossan建议的代码后，服务器端出现了一个故障，导致出现问题