将图像从反应上传到 nodejs express API答案

【问题标题】：upload image from react to a nodejs express API将图像从反应上传到 nodejs express API
【发布时间】：2020-04-29 12:56:58
【问题描述】：

我有以下输入组件来上传文件：

 <input
  name="image"
  ref={this.fileInputRef}
  className="FileInput"
  type="file"
  multiple
  onChange={onFilesAdded}
/>

这就是 onFilesAdded 方法的内容：

if (file.length > 1) {
  setUploadingError('Solo puedes cargar un archivo');
  return;
} else {
  setSending(true);
  setUploadingError(null);

  const data = new FormData();
  data.append('file', file);

  httpService.contractPayment(data);
}

然后在我的 httpService.contractPayment(data) 上，如果一个获取包装器使用以下标头发出 POST 请求：

{
  Authorization: `Bearer ${token}`,
}

但是在 nodejs 上我没有得到图像，但是如果我从邮递员那里尝试，我会得到图像并上传图像。所以我认为我有什么不对的反应。请有任何建议。

【问题讨论】：

标签： node.js reactjs

【解决方案1】：

这里可能有很多问题，但让我们从头开始。首先，当您的输入发生变化时，您将调用 onFilesAdded 函数，这就是您可以访问该文件的方式：

onFilesAdded = event => {
 const file = event.target.files[0]
}

之后，通过添加 3 个参数将其附加到 FormData：

data.append('file', file, file.name);

这里的一个陷阱是，如果您在请求中添加 content-type 标头，它将不起作用。让fetch处理所有这些，只需添加Authorization！

【讨论】：

非常感谢，我的问题是 append data.append('file', file);插入 data.append('file', file[0]);但直到我看到你的答案我才看到错误