将 Excel 文件从 React 上传到 C# ASP.NET Core 后端答案

【问题标题】：Upload Excel File from React to C# ASP.NET Core backend将 Excel 文件从 React 上传到 C# ASP.NET Core 后端
【发布时间】：2019-02-09 06:40:07
【问题描述】：

我正在尝试将文件从反应前端上传到 C# 后端。我正在使用放置区来获取文件，然后我调用一个 api 帮助程序来发布文件，但是当我尝试不同的事情时我得到了不同的错误。我不确定标题应该是什么以及我应该发送什么，但我得到了两个明显的错误。如果我没有设置内容类型，我会收到 415（不支持的媒体类型）错误。如果我将内容类型指定为 multipart/form-data，我会收到 500 内部服务器错误。当内容类型为 application/json 时，我得到同样的错误。该网址已过去，我确定它是正确的。我不确定该文件是否应该像我所做的那样附加为 file[0][0] 或作为 file[0] 附加，因为它是一个数组，但我相信它应该是第一个。欢迎任何建议:) 这是我的 api post helper 代码：

export const uploadAdminFile = (file, path, method = 'POST', resource = 
config.defaultResource) => {
const url = createUrl(resource, path);

const data = new FormData();


data.append('file', file[0][0]);
data.append('filename', file[0][0].name);

const request = accessToken =>
fetch(
  url,
  {
    method,
    mode: 'cors',
    withCredentials: true,
    processData: false,
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json', //'multipart/form-data',
      Authorization: `Bearer ${accessToken}`,
    },
    body: data,
  })
  .then(res => res.json())
  .then(success => console.log('API HELPER: file upload success: ', success)
    .catch(err => console.log('API HELPER: error during file upload: ', err)));


return sendRequest(request, resource);

};

【问题讨论】：

“我收到 500 内部服务器错误。”...您是否调查了该错误的原因？这意味着服务器端代码以某种方式崩溃。您需要调试服务器代码、检查日志等以找出实际故障。
谢谢，我明白了。我目前无权这样做，所以我想问是否有人可以帮助我验证/验证，确认或否认我正在做的事情是“正确的”/这是否应该在前端工作或者是否有什么东西我显然做错了
如果您尝试上传文件，那么内容类型肯定不是 JSON。
然而，更大的问题似乎是 fetch 函数中的 init 属性并不期望您在那里使用的大多数属性名称。见stackoverflow.com/questions/52162745/…。您是否将它与 jQuery 的 $.ajax (api.jquery.com/jquery.ajax) 混淆了——它们在我看来就像 jQuery 样式选项。 method 也应该是 method: "POST" 或其他东西。没有名称的值本身是无用的。
它们只使用默认值，因此我不必显式发送它们。使用 ES^ 语法，您可以缩短键：如果名称相同，则将值缩小为一件事，这样与方法相同：方法，

标签： javascript excel reactjs fetch

【解决方案1】：

感谢您的帮助和建议，事实证明这是一个后端问题，但我仍然在此过程中学到了很多东西。我将在此处发布我的工作代码，以防有人遇到此问题并发现它有用。

export const uploadAdminFile = (file, path, resource=config.defaultResource) => {
  const url = createUrl(resource, path);
  const formData = new FormData();

  formData.append('file', file[0][0]);
  formData.append('filename', file[0][0].name);

  const request = accessToken =>
    fetch(url,
    {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        Authorization: `Bearer ${accessToken}`,
    },
    body: formData,
  });

  return sendRequest(request, resource);
};

如前所述，文件名不需要单独发送，count也可以省略。我以这种方式索引文件，因为我从 dropzone 作为数组获取它，我只想要一个文件（数组中的第一个文件）。我希望这对其他人有所帮助，这里是mdn fetch docs 的链接（很好的信息）和一篇关于使用fetch and formData 的好文章。

【讨论】：