如何在Node.js中处理文件上传和下载？

最新推荐文章于 2024-10-08 16:49:30 发布

JJCTO袁龙

最新推荐文章于 2024-10-08 16:49:30 发布

阅读量1k

点赞数 30

分类专栏： Node.js 文章标签： node.js

本文链接：https://blog.csdn.net/yuanlong12178/article/details/140352967

版权

Node.js 专栏收录该内容

218 篇文章 5 订阅

订阅专栏

在现代 web 应用开发中，处理文件上传和下载是一个常见且重要的任务。特别是在 Node.js 环境下，我们可以通过多种方式有效地管理这些操作。本文将详细探讨如何在 Node.js 中处理文件上传和下载，并通过实例代码加以说明。

一、文件上传

1. 使用 Multer 中间件处理文件上传

Multer 是一个 Node.js 的中间件，用于处理 multipart/form-data，它主要用于上传文件。Multer 将文件存储到磁盘或内存中，然后将相关的信息附加到 req 对象上。

首先，你需要安装 Multer：

npm install multer

2. 配置 Multer

我们需要配置 Multer 来指定文件存储的位置以及文件命名的方式。以下是一个基本的配置示例：

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

const app = express();

// 配置存储方式
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, `${Date.now()}-${file.originalname}`)
    }
});

// 创建 Multer 实例
const upload = multer({ storage: storage });

app.post('/upload', upload.single('file'), (req, res) => {
    try {
        res.send({
            status: 'success',
            path: req.file.path,
        });
    } catch (err) {
        res.send(400);
    }
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server started on port 3000');
});

在这段代码中，我们创建了一个 multer.diskStorage 实例，来指定文件保存的位置和文件名格式。然后，我们使用 upload.single('file') 中间件来处理单个文件上传。上传后的文件信息将存储在 req.file 中。

3. HTML 表单

我们需要一个 HTML 表单来上传文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <h1>Upload a File</h1>
    <form ref="uploadForm" 
        id="uploadForm" 
        action="/upload" 
        method="post" 
        encType="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="Upload!" />
    </form>
</body>
</html>

通过这个表单，用户可以选择一个文件并提交到我们的 Node.js 服务器进行上传。

二、文件下载

1. 使用 Express 处理文件下载

Express 提供了一个简单的方法来处理文件下载，即通过 res.download() 或者 res.sendFile() 方法。

第一步，假设我们已经有一些文件存放在服务器上，比如 uploads 目录下。我们需要创建一个路由来处理文件下载请求。

以下代码演示了如何设置一个简单的下载路由：

app.get('/download/:filename', (req, res) => {
    const filename = req.params.filename;
    const filePath = path.join(__dirname, 'uploads', filename);

    res.download(filePath, (err) => {
        if (err) {
            console.error(err);
            res.status(500).send('File download failed');
        }
    });
});

2. 下载链接

可以通过一个简单的 HTML 页面为用户提供文件下载链接：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Download</title>
</head>
<body>
    <h1>Download a File</h1>
    <a href="/download/example.txt">Download example.txt</a>
</body>
</html>

在这段代码中，用户可以点击链接来下载 example.txt 文件。

3. 使用 JavaScript 动态创建下载链接

为了增强用户体验，我们可以使用 JavaScript 来动态创建下载链接。以下是使用 Fetch API 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic File Download</title>
</head>
<body>
    <h1>Download a File</h1>
    <button onclick="downloadFile('example.txt')">Download example.txt</button>

    <script>
        async function downloadFile(filename) {
            const response = await fetch(`/download/${filename}`);

            if (response.ok) {
                const blob = await response.blob();
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = filename;

                document.body.appendChild(a);
                a.click();

                window.URL.revokeObjectURL(url);
            } else {
                console.error('Failed to download file');
            }
        }
    </script>
</body>
</html>