我无法使用 Axios（React、Node.JS）从用户上传的文件中发布 FormData 对象答案

【问题标题】：I can't POST FormData Object from user uploaded file with Axios (React, Node.JS)我无法使用 Axios（React、Node.JS）从用户上传的文件中发布 FormData 对象
【发布时间】：2023-03-20 06:16:02
【问题描述】：

我正在尝试允许用户将图片上传到我的应用程序（React 前端、Node 后端）。我想将上传的文件从客户端发送到服务器，然后从我的服务器向将处理存储图像的 Firebase 云函数发出请求。

我的表单 HTML 如下：

 <div className='LoafGalleryWrap'>
    <h1 className='banner'>Illustrious Loafs</h1>
    <form>
      <label>Add a loaf to the exhibit:
        <input type='file' onChange={props.fileSelectedHandler} />
        <button onClick={props.fileUploadHandler}>Upload</button>
      </label>
    </form>
    <button onClick={props.toggleDisplayLandingPage}>Back</button>
</div>

我使用以下方法在我的应用程序中获取文件数据。在 console.log 中，我可以看到要发送到服务器的文件数据。

fileUploadHandler(e) {
e.preventDefault();
e.stopPropagation();
let file = this.state.selectedFile;
let formData = new FormData();
formData.append('image', file);
formData.append('name', file.name);

const pic = formData.getAll('image');
console.log(formData)

axios({
  url: 'http://localhost:3001/uploadLoaf',
  method: 'POST',
  data: formData,
  headers: { "Content-Type": "multipart/form-data" }
})
.then(respo => console.log(respo))

}

在我的服务器中，当我检查请求正文时，那里什么都没有。我将其注销并简单地得到一个空对象。我试过使用 multer 和 connect-multipart 中间件，但没有一个能成功显示表单数据。我所做的与本文建议的 (https://www.geeksforgeeks.org/file-uploading-in-react-js/) 类似，但我不知道如何获取表单中发送的数据。非常感谢任何指导。

我的服务器路由如下：

app.post('/uploadLoaf', (req, res) => {


console.log('uploadLoaf endpoint reached');
  console.log(req.body);
  res.status(201).json('complete')
  // axios.post('https://us-central1-sour-loafs.cloudfunctions.net/uploadFile/', 'upload_file', formData, {
  //     headers: {
  //       'Content-Type': 'multipart/form-data'
  //     }
  // })
  //   .then(result => {
  //     console.log(result);
  //     res.send(result);
  //   })
  //   .catch(err => {
  //     console.log(err);
  //     res.send(err)
  //   })
});

【问题讨论】：

标签： javascript node.js reactjs axios form-data

【解决方案1】：

尝试用这个替换你的axios函数

axios.post("http://localhost:3001/uploadLoaf", formData, { })
      .then(res => { // then print response status
        console.log(res.statusText)
      })

让我知道你在后端使用了什么以及 res 函数的结果是什么

【讨论】：

我更新了问题以显示我的服务器路由，我使用的是 Node 和 Express。日志只显示任意响应——我的问题是当我登录 req.body() 时无法获取表单数据

【解决方案2】：

我设法通过使用 Multer 的上传功能访问了 FormData 文件数据。我配置的导入和服务器路由以便我可以访问文件数据如下：

    const multer = require("multer");
    const upload = multer({
      limits:{fileSize: 1000000},
      }).single("image");

app.post('/uploadLoaf', (req, res) => {
      upload(req, res, (err) => {
        if (err) {
          res.sendStatus(500);
        }
        console.log(req.file);
        res.send(req.file);
      });
    });

我现在不确定如何以 API 预期的方式将此文件数据发送到 API，收到一条错误消息：“错误：无法处理请求\n”。但至少我现在可以看到表单中的数据了。

【讨论】：