随着互联网的发展，文件上传及资源访问已成为前端开发中一个非常重要的方面。在这篇文章中，我们将以 Express.js 和 MongoDB 为基础，来实现一个简单可用的文件上传和资源访问系统。
什么是 Express.js？
Express.js 是一个基于 Node.js 平台的轻量级 Web 开发框架。它简单易用，且拥有丰富的扩展和插件，可以快速而方便地实现各种 Web 应用程序的开发，并支持多种模板引擎和路由功能。
什么是 MongoDB？
MongoDB 是一个强大的 NoSQL 数据库系统，它具有可扩展性和灵活性，可以为应用程序提供高效的数据存储和处理能力。MongoDB 支持多种数据结构和查询语言，让开发者可以更简单快捷地进行数据操作。
如何实现文件上传及资源访问？
接下来，我们将：
- 了解如何通过 Express.js 实现文件上传；
- 了解如何将上传的文件保存到 MongoDB 中；
- 学习如何访问 MongoDB 中的储存文件；
- 了解如何为这些文件提供访问接口。
文件上传
文件上传是现代 Web 应用程序的一个非常基本和必要的功能。通过 Express.js，我们可以使用 multer 插件来实现文件上传。multer 是一个 Node.js 中间件，可以处理 multipart/form-data 类型的表单数据，用于上传文件。
在您的项目中，安装 multer 并将其导入：
npm install multer;
var multer = require('multer');接着，我们创建一个储存文件的文件夹，以便于将上传的文件保留在同一目录下，并定义 multer 实例：
-- -------------------- ---- -------
--- ------- - --------------------
------------ -------- ----- ----- --- -
-------- --------------
--
--------- -------- ----- ----- --- -
-------- -------------- - --- - ------------
-
--
--- ------ - -------- -------- ------- ---在这个例子中，我们将上传的文件保存到名为 "uploads" 的文件夹中，并定义一个文件命名规则，其中包括文件原始名称和时间戳。
最后，将上传的路由指向 upload 中间件：
app.post('/upload', upload.single('file'), function (req, res, next) {
res.send('File Uploaded Successfully');
})在上面的代码中，我们将表单中名为 "file" 的文件上传到服务器，并在上传成功后输出成功信息。
将上传的文件保存到 MongoDB 中
接下来，我们将学习如何使用 GridFS 将上传的文件直接保存到 MongoDB 中。GridFS 支持大容量的文件存储，适合于存储大量的二进制数据。
在程序中，我们使用 GridFSStorage（基于 Multer）来将文件直接储存在 MongoDB 中。
首先，安装依赖：
npm install multer-gridfs-storage;
其次，导入 GridFSStorage 和 GridFSBucket：
var Grid = require('gridfs-stream');
var GridFsStorage = require('multer-gridfs-storage');定义 GridFSStorage：
-- -------------------- ---- -------
----- ------- - ---------------
---- ----------------
----- ----- ----- -- -
------ --- ----------------- ------- -- -
---------------------- ----- ---- -- -
-- ----- -
------ ------------
-
----- -------- - ------------------- - --------------------------------
----- -------- - -
--------- ---------
--------- -
------- -------------
--
----------- ---------
--
------------------
---
---
-
---在这个例子中，GridFSStorage 将文件保存到名为 "uploads" 的 MongoDB 存储桶中，并随机生成一个 16 字节的文件名。我们还将用户 ID 存储在文件的 Metadata 属性中，以便在访问资源时做身份验证。
最后，用 multer 将路由配置为直接保存文件：
const upload = multer({
storage
});
router.post('/upload', upload.single('file'), (req, res) => {
res.send('File uploaded');
});现在，上传的文件可以直接储存在 MongoDB 权威数据库中，而无需通过文件系统！
访问 MongoDB 中的储存文件
MongoDB 中储存的文件可以通过 GridFSBucket 对象访问。我们可以通过名称访问上面建立的名为 "uploads" 的桶：
const conn = mongoose.createConnection(config.database);
let gfs;
conn.once('open', () => {
// Initialize the stream
gfs = Grid(conn.db, mongoose.mongo);
gfs.collection('uploads');
});我们只需使用 gfs 即可轻松读取已储存的文件，例如：
const readstream = gfs.createReadStream({
filename: fileName
});
res.set('Content-Type', contentType);
return readstream.pipe(res);为这些文件提供访问接口
最后，我们将为上传并储存到 MongoDB 中的文件提供 API 接口，以便客户端可以轻松访问文件。我们的 RESTful API 将支持访问和删除已存储的文件资源。
首先，我们在我们的 API 中添加以下路由：
-- -------------------- ---- -------
----------------------------- ----- ---- -- -
----- -------- - --------------------
----- ---------- - --------------------------
--- ----------- - -------------
-- -
------------------------- --
------------------------- --
-------------------------- --
-------------------------
- -
----------- - -------------------------------------------------- - -----
-
----------------------- -------------
------ ---------------------
---
-------------------------------- ----- ---- -- -
----- -------- - --------------------
--------------- --------- -------- -- ----- -- -
-- ----- -
--------------------------
-
----------------------
---
---这个代码演示了如何构建为客户端提供文件的 API。通过 GET 请求，我们可以读取文件，而通过 DELETE 请求，我们可以删除文件（根据文件名）。
总结
Express.js 和 MongoDB 是前端开发中非常重要的工具和框架，可以快速实现文件上传和资源访问等功能。在本文中，我们了解了如何使用 Express.js 和 MongoDB 实现文件上传及资源访问，并提供了详细的示例代码。希望这篇文章对您的学习和工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469b0d3968c7c53b09899c1