node.js实现多图片上传实例

具体的攻略如下：

1. 安装依赖

在开始项目前，需要先安装所需的依赖：

npm install express multer

其中，express是Node.js的Web框架，用于创建服务器；multer是Node.js的一个中间件，用于处理HTTP上传请求，支持多文件上传。

2. 编写HTML页面

需要先编写一个HTML页面，用于展示表单和上传控件。以下为一个示例页面：

<!DOCTYPE html>
<html>
<head>
    <title>多图片上传</title>
</head>
<body>
    <h1>多图片上传示例</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" multiple><br><br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

其中，form标签的action指向服务器的上传接口，enctype属性指定上传的数据类型为multipart/form-data，支持多文件上传。

3. 编写Node.js代码

在编写Node.js代码前，需要先引入所需的库：

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

其中，express和multer在第1步中已经安装，只需引入即可。

3.1 配置multer

multer需要配置上传文件的保存路径和文件名，以及限制文件大小的值等参数。以下为一些常用的配置：

// 配置保存路径和文件名，以及文件大小的限制
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        // 保存的路径为 uploads/
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        // 文件的名字为原始文件名和当前时间戳，以防重名
        cb(null, file.originalname + '-' + Date.now())
    },
    limits: {
        // 限制文件大小为5MB
        fileSize: 5 * 1024 * 1024
    }
});

3.2 配置上传接口

上传接口需要先处理静态资源，即上传的文件，这可以通过express.static方法实现：

// 配置静态资源路径为/uploads
app.use('/uploads', express.static('uploads'));

处理上传请求时，首先要通过multer中间件处理上传的文件，通过req.files获取上传的文件对象。如果有多个文件，则使用数组形式访问。以下为处理上传请求的示例代码：

// 配置上传接口/upload
app.post('/upload', multer({ storage: storage }).array('file'), function (req, res, next) {
    // req.files是上传的文件对象
    console.log('上传的文件信息：', req.files);
    res.send('上传成功！');
});

其中，multer({ storage: storage }).array('file')表示使用multer中间件处理上传请求，使用array方法处理多文件上传，限定上传控件的name属性为file。

4. 运行代码

完成以上步骤，即可执行以下命令运行代码：

node app.js

其中，app.js为上述代码文件的名称。

示例1

下面是一个完整的Node.js代码示例：

const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

// 静态资源路径
app.use('/uploads', express.static('uploads'));

// 配置上传文件信息
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname + '-' + Date.now())
    },
    limits: {
        fileSize: 5 * 1024 * 1024
    }
});

// 上传接口
app.post('/upload', multer({ storage: storage }).array('file'), function (req, res, next) {
    console.log('上传的文件信息：', req.files);
    res.send('上传成功！');
});

// 启动服务器
app.listen(port, () => {
    console.log(`服务器已启动：http://localhost:${port}/`);
});

示例2

以下为一个基于Express的完整示例代码，包括HTML页面和上传示例：

<!DOCTYPE html>
<html>
<head>
    <title>多图片上传</title>
</head>
<body>
    <h1>多图片上传示例</h1>
    <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file" multiple><br><br>
        <input type="submit" value="上传">
    </form>
</body>
</html>

const express = require('express');
const multer  = require('multer');
const app = express();
const port = 3000;

app.use(express.static('public'));

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.originalname + '-' + Date.now())
    },
    limits: {
        fileSize: 5 * 1024 * 1024
    }
});

app.post('/upload', multer({ storage: storage }).array('file'), function (req, res, next) {
    console.log('上传的文件信息：', req.files);
    res.send('上传成功！');
});

app.listen(port, () => {
    console.log(`服务器已启动：http://localhost:${port}/`);
});

在本示例中，HTML页面位于public目录下的index.html文件中，CSS和JavaScript文件也在该目录下。上传的文件将保存在uploads目录中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js实现多图片上传实例 - Python技术站