时间戳

首页 > 解决方案 > 如何在反应中从服务器下载文件？

node.js - 如何在反应中从服务器下载文件？

问题描述

我有一个 Node.js 后端，它将图标图像发送到 React 前端。最初，我将此图像编码为 Base64 字符串并将其直接存储在数据库中。我创建了一个将这个字符串返回到前端的 api。但是，我读到将它存储在数据库中是不好的，所以我重新编写了 api 以将此字符串作为 json 文件存储在服务器中，现在我的 api 返回此 json 文件的绝对路径。但是，React 前端应该如何检索文件？是否可以使用绝对路径或者我必须创建另一个 api 来返回文件对象？如果是这样，我该怎么做？

我是 react 和 node.js 的新手，所以任何帮助表示赞赏。谢谢。

编辑：我将文件路径存储为代码所在位置的 __dirname + 文件名。访问该 url 时出现 cors 错误

标签： node.jsreactjs

解决方案

使用 Express 来共享该文件夹。

假设您将文件保存在一个名为 的文件夹中files，就在根目录下。假设您的服务器结构大致如下所示：

- backend
   - app.js
- frontend
   - Components
   - Routes
- public
   - dev
      - index.html  (your template file)
   - files
       - myimage.png

在您的根 js 文件中（app.js？server.js？index.js？）：

const app = express()
app.use('/static', express.static('public'));
app.use('/files', express.static('public/files'));

然后，在前端代码中：

<img src='/files/myimage.png' />

顺便说一句，将图像以 base64 格式存储在数据库中是没有问题的……但是每个数据库备份也会备份这些图像。如果你有一个小数据库，不用担心。但是，如果您有很多图像，尤其是非常大的图像，这将使您的数据库（和备份）变得不必要地大而笨重。

一切都取决于您的用例。

推荐阅读