文件上传 - Node Js(Express) 到 React Js。如何获得正确的图像路径？答案

【问题标题】：File upload - Node Js(Express) to React Js. How to get correct image path?文件上传 - Node Js(Express) 到 React Js。如何获得正确的图像路径？
【发布时间】：2019-01-13 07:19:53
【问题描述】：

我正在开发本地系统并在节点 js 中开发文件上传功能。目前我的文件结构如下。

Project
..client
.... source code of React App
..Server
....uploads
......avatar
........image.png
....index.js

这里的 server 是 Node js 代码，Client 是 React js 代码。

所以我开发了一个 API 来将图像上传到“服务器/上传/头像”。如您所见，“uploads”文件夹中有一张名为“avatar.png”的图片。

我的问题是显示什么路径来访问具有完整域路径的特定图像？我想要这种 API 中的结果。例如
{头像：“http://192.168.1.100:3000/*”}。将 * 视为剩余图像路径。但我无法在客户端访问图像。我不知道这是否是正确的方法。可能我需要在 index.js 文件中为 Nodejs 设置静态路径。不确定。

【问题讨论】：

标签： javascript node.js reactjs api express

【解决方案1】：

您应该在下面的快速配置中设置静态文件夹路径：

app.use(express.static('public'))

当然，您需要使用该名称创建新文件夹，然后您可以将所有资产放入其中，之后您将能够访问如下文件：

http://localhost:3000/kitten.jpg

【讨论】：

但我还需要为 React js 'index.html 设置静态路径才能在节点服务器上运行。 app.use(express.static(path.join(__dirname, 'client/build'))); app.get('*', function (req, res) { res.sendFile(path.join(__dirname, 'client', 'build', 'index.html')); });
您只需在组件中添加相对于公共文件夹的图像路径，express 将自动提供请求的文件。您不必处理此功能。