nodejs+express实现文件上传下载管理网站

下面是“nodejs+express实现文件上传下载管理网站”的完整攻略。

第一步：初始化项目

首先，需要在本地创建一个空的文件夹，并进入该文件夹：

mkdir file-manager
cd file-manager

接着，需要使用npm初始化该项目：

npm init -y

这将会生成一个package.json文件，用于配置项目信息和依赖项。

第二步：安装依赖项

需要安装以下几个依赖项：

express：用于创建Web应用程序；
multer：用于处理文件上传；
mime：用于获取文件的MIME类型。

通过以下命令进行安装：

npm install express multer mime --save

第三步：创建目录结构

需要创建以下几个文件夹：

public：用于存放静态文件；
uploads：用于存放上传的文件。

需要创建以下两个文件：

index.html：Web应用程序的主页；
app.js：Web应用程序的入口文件。

该项目的目录结构如下所示：

file-manager/
├─ node_modules/
├─ public/
│  └─ index.html
├─ uploads/
└─ app.js

第四步：编写代码

4.1 编写index.html代码

该文件将会作为Web应用程序的主页，可以在其中编写一个简单的HTML页面，以展示上传和下载文件的功能。代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>File Manager</title>
  <style>
    body { font-family: sans-serif; }
  </style>
</head>
<body>
  <h1>File Manager</h1>

  <form method="POST" enctype="multipart/form-data" action="/upload">
    <input type="file" name="file" required>
    <br><br>
    <button type="submit">Upload</button>
  </form>

  <br><br>

  <h2>Files</h2>

  <ul id="file-list"></ul>

  <script>
    // AJAX GET request for the file list
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/files', true);
    xhr.onload = function() {
      if (xhr.status === 200) {
        const fileList = JSON.parse(xhr.responseText);
        for (const fileName of fileList) {
          const fileLink = document.createElement('a');
          fileLink.textContent = fileName;
          fileLink.href = `/download/${fileName}`;
          fileLink.target = '_blank';
          const listItem = document.createElement('li');
          listItem.appendChild(fileLink);
          document.getElementById('file-list').appendChild(listItem);
        }
      }
    };
    xhr.send();
  </script>
</body>
</html>

该文件中包含一个<form>表单，用于上传文件，以及一个<ul>列表，用于展示已上传的文件。其中，表单的enctype属性必须设置为"multipart/form-data"，以支持文件上传。

该页面还包含JavaScript代码，用于通过AJAX GET请求获取已上传的文件列表，以及为每个文件创建一个下载链接。

4.2 编写app.js代码

该文件是Web应用程序的入口文件，需要在其中编写服务器端的代码。首先，需要引入express和multer模块：

const express = require('express');
const multer = require('multer');
const mime = require('mime');

接着，需要创建一个express应用程序：

const app = express();

为了支持处理multipart/form-data类型的POST请求，需要创建一个multer实例，并配置上传文件的目录：

const storage = multer.diskStorage({
  destination(req, file, cb) {
    cb(null, './uploads');
  },
  filename(req, file, cb) {
    cb(null, `${file.originalname}-${Date.now()}.${mime.getExtension(file.mimetype)}`);
  }
});
const upload = multer({ storage });

其中，destination函数指定文件的上传目录，filename函数用于生成新文件的文件名（包含时间戳和文件的MIME类型后缀）。

接下来，需要创建一个POST路由，用于处理文件上传：

app.post('/upload', upload.single('file'), (req, res) => {
  res.redirect('/');
});

该路由使用upload.single()函数来处理单个文件的上传，将上传的文件保存到uploads子目录中。上传成功后，重定向到Web应用程序的主页。

还需要创建一个GET路由，用于获取上传后的文件列表：

app.get('/files', (req, res) => {
  fs.readdir('./uploads', (err, files) => {
    if (err) {
      res.status(500).send(err.message);
    } else {
      res.json(files);
    }
  });
});

该路由使用fs.readdir()函数来读取uploads子目录中的所有文件名，并返回一个JSON数组。

最后，还需要创建一个GET路由，用于下载文件：

app.get('/download/:fileName', (req, res) => {
  const filePath = `./uploads/${req.params.fileName}`;
  res.download(filePath, req.params.fileName);
});

该路由使用res.download()函数将请求的文件发送给客户端，客户端会提示是否下载该文件。

4.3 运行Web应用程序

最后，需要在命令行中运行以下命令：

node app.js

此时，Web应用程序就开启了，可以在浏览器中打开http://localhost:3000/来查看Web应用程序的主页。在该页面中，可以上传文件并查看已上传的文件，并在需要时下载这些文件。

示例说明

示例1：上传文件

在Web应用程序的主页中，点击“Choose File”按钮，选择一个文件上传，并点击“Upload”按钮。上传成功后，该文件将会出现在文件列表中。

示例2：下载文件

在Web应用程序的主页中，点击已上传文件名称后的链接，即可下载该文件。如果系统中已安装可处理该文件类型的应用程序，则该应用程序将会自动打开该文件，并在需要时提示是否下载该文件。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：nodejs+express实现文件上传下载管理网站 - Python技术站