使用NodeJS将文件或图像上传到服务器(使用Node.js实现文件和图像上传至服务器的详细教程)

原创

ithorizon 6个月前 (10-20) 阅读数 10 #后端开发

在当今的互联网时代，文件和图像的上传功能已经成为了许多网站和应用的基本需求。本文将详细介绍怎样使用Node.js实现文件和图像上传至服务器的功能。我们将使用一些常用的Node.js模块，如express、multer等，来构建一个明了的文件上传服务器。

一、环境准备

在起初之前，确保你的计算机上已经安装了Node.js。如果没有安装，可以访问Node.js官网下载并安装。

接下来，我们需要创建一个新的项目文件夹，并在该文件夹中初始化一个新的Node.js项目：

mkdir file-upload-server

cd file-upload-server

npm init -y

二、安装依存

本项目将使用以下依存模块：

express：用于创建HTTP服务器。

multer：用于处理文件上传。

使用npm安装这些模块：

npm install express multer

三、创建服务器

在项目文件夹中创建一个名为server.js的文件，并写入以下代码来创建一个基本的Express服务器：


const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;
// 设置静态文件夹
app.use(express.static('public'));
// 设置multer存储配置
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname)
    }
});
const upload = multer({ storage: storage });
// 路由设置
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});
// 文件上传路由
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('没有上传文件。');
    }
    res.send('文件上传胜利！');
});
// 启动服务器
app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
});

四、创建前端页面

在项目文件夹中创建一个名为public的文件夹，并在该文件夹中创建一个名为index.html的文件，写入以下代码：

文件上传

五、运行服务器

在命令行中运行以下命令来启动服务器：

node server.js

然后打开浏览器，访问http://localhost:3000，你应该会看到上传文件的表单。

六、上传文件

在浏览器中，选择一个文件或图像，然后点击“上传”按钮。文件将被上传到服务器的uploads文件夹中。

服务器端代码会处理上传的文件，并将其保存在指定的目录下。如果上传胜利，服务器将返回“文件上传胜利！”的消息。

七、不正确处理

在实际应用中，我们需要处理各种大概出现的不正确，如文件类型不匹配、文件大小超出局限等。以下是处理这些不正确的方法：


// 文件上传路由
app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('没有上传文件。');
    }
    // 检查文件类型
    if (!req.file.mimetype.startsWith('image/')) {
        return res.status(400).send('只允许上传图像文件。');
    }
    // 检查文件大小
    if (req.file.size > 1024 * 1024 * 5) {
        return res.status(400).send('文件大小不能超过5MB。');
    }
    res.send('文件上传胜利！');
});