ReactJS：如何从前端上传图片到 public 文件夹

Question

我希望能够在开发和生产中直接从前端将图像上传到 ReactJS public 文件夹。对于生产，我使用带有 nodejs 后端的 heroku 应用程序。

从我在网上找到的所有使用 ReactJS 上传图片的教程中，它们都使用服务器端将它们上传到云端，但我想知道是否可以将它们上传到 public 文件夹像 Lavarel 那样做，这样做有什么缺点吗？

Answer 1

我想出了一个解决办法。我找到了一个使用 NodeJS 上传文件的教程。该文件只需要通过端点发送，并在 NodeJS 服务器上像这样处理它。

app.post('/upload', (req, res) => {
  if (req.files === null) {
  return res.status(400).json({ msg: 'No file uploaded' });
  }

  const file = req.files.file;

  file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
    if (err) {
      console.error(err);
      return res.status(500).send(err);
    }

    res.json({ fileName: file.name, filePath: `/uploads/${file.name}` });
  });
});

此服务器将图像文件上传到 ReactJS 客户端的 public/uploads 文件夹。然后在响应中 returns 文件名和文件路径。

ReactJS：如何从前端上传图片到 public 文件夹

ReactJS: How to upload images from front-end to public folder

file-upload

image

reactjs