Nodejs文件上传、监听上传进度的代码

下面是详细讲解“Nodejs文件上传、监听上传进度的代码”的完整攻略。

文件上传

文件上传是指将用户选择的文件传输到服务器上，以便服务器进行处理并存储。Nodejs中实现文件上传的方法有很多，下面是一种通用的实现方法：

首先，需要使用multer模块处理文件上传的请求。这个模块可以很方便地处理上传文件的解析和存储。

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

const UPLOAD_PATH = 'uploads/';

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, UPLOAD_PATH);
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname);
    }
});

const upload = multer({ storage: storage }).single('file');

app.post('/upload', (req, res) => {
    upload(req, res, (err) => {
        if (err) {
            res.status(400).send({ error: err.message });
        } else {
            res.send({ message: 'File uploaded successfully' });
        }
    });
});

app.listen(3000, () => {
    console.log('Server started on port 3000');
});

在这个例子中，我们使用multer模块处理文件上传请求，将文件存储在指定的目录下（这里是uploads/）。上传的文件名将保持原始文件的名称。

我们还在Express应用程序中使用了一个POST路由处理文件上传请求。在这个路由中，我们调用upload函数来处理上传请求。如果上传时出错，将会返回一个错误对象；否则，它将返回一个成功的响应对象。

监听上传进度

下面是一个示例，演示如何在上传文件时监听上传进度，并将上传进度实时显示给用户。

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

const UPLOAD_PATH = 'uploads/';

const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, UPLOAD_PATH);
    },
    filename: (req, file, cb) => {
        cb(null, file.originalname);
    }
});

const upload = multer({ 
    storage: storage,
    limits: { fileSize: 2000000 } // 限制上传文件大小为2MB
}).single('file');

app.post('/upload', (req, res) => {
    upload(req, res, (err) => {
        if (err) {
            res.status(400).send({ error: err.message });
        } else {
            res.send({ message: 'File uploaded successfully' });
        }
    });
});

app.post('/progress', (req, res) => {
    // 设置CORS头以允许跨域请求
    res.set('Access-Control-Allow-Origin', '*');
    // 获取上传进度
    let progress = req.socket.parser.incoming._httpMessage.uploadProgress;
    // 将进度转换为百分比
    progress.percent = Math.round(progress.loaded / progress.total * 100);
    // 将进度发送回客户端
    res.json(progress);
});

app.listen(3000, () => {
    console.log('Server started on port 3000');
});

这个例子中，我们添加了一个新的POST路由/progress来处理上传进度请求。在这个路由中，我们获取上传进度，并将上传进度以JSON格式发送回客户端。

为了在客户端实时显示进度，我们需要定时访问/progress路由。下面是一个简单的jQuery脚本，用于每500毫秒向服务器发送上传进度请求，并显示进度：

setInterval(() => {
    $.ajax({
        url: 'http://localhost:3000/progress',
        type: 'POST',
        dataType: 'json',
        crossDomain: true,
        success: function (data) {
            $('#progress').text(data.percent + '%');
        }
    });
}, 500);

在这个脚本中，我们使用了setInterval方法每500毫秒定时向服务器发送请求。在请求成功后，我们从服务器接收上传进度，将进度显示为一个百分比，并将其显示在页面上。

总体来说，监听上传进度需要一定的客户端和服务器端处理能力，需要注意的是上传文件的大小以及请求timeout等，根据实际情况进行调整。