Nodejs 文件上传滚动条如何处理

Nodejs 文件上传滚动条如何处理

ins = fs.createReadStream(file.path); ous = fs.createWriteStream(path);

ins.pipe(ous); 这个pipe过程中，如何取到已经读取文件流的大小呢 我要用滚动条

3 回复

在 Node.js 中处理文件上传时，你可能会遇到需要显示文件上传进度的情况。例如，使用滚动条来显示当前已上传的文件大小。这可以通过监听文件读取流（Readable Stream）上的事件来实现。

下面是一个简单的示例，展示了如何在文件上传过程中获取已读取的文件大小，并更新一个虚拟的滚动条来表示进度。

示例代码

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

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    const file = req.file;
    const path = `${file.destination}/${file.filename}`;

    // 创建读取流和写入流
    const ins = fs.createReadStream(file.path);
    const ous = fs.createWriteStream(path);

    let uploadedSize = 0;

    // 监听数据读取事件
    ins.on('data', (chunk) => {
        uploadedSize += chunk.length;
        console.log(`已上传 ${uploadedSize} 字节`);
        
        // 更新滚动条的逻辑可以在这里添加，例如通过WebSocket发送给前端
    });

    // 管道传输
    ins.pipe(ous);

    // 监听结束事件
    ous.on('finish', () => {
        console.log('文件上传完成');
        res.send('文件上传成功');
    });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

解释

  1. 创建读取流和写入流：我们使用 fs.createReadStream 创建一个从临时文件读取数据的流，然后使用 fs.createWriteStream 创建一个写入目标文件的流。

  2. 监听数据读取事件：通过监听 data 事件，我们可以捕获每次从源文件中读取的数据块。每次读取时，我们将块的长度累加到 uploadedSize 变量中，以跟踪已上传的总大小。

  3. 管道传输：使用 pipe 方法将读取流连接到写入流，这样就可以自动地将文件内容从一个位置复制到另一个位置。

  4. 监听结束事件：当所有数据都被成功写入目标文件后，finish 事件会被触发，表示文件上传完成。

前端滚动条

为了在前端展示上传进度，你可以使用 WebSocket 或 AJAX 定期请求服务器的状态。例如，当接收到 data 事件时，可以通过 WebSocket 发送已上传的大小信息到前端，前端则可以根据这些信息动态更新滚动条的位置。

以上就是如何在 Node.js 中处理文件上传进度的基本方法，希望对你有所帮助！


是进度条，汗。。。标题写错了。

ins.on(“data”,function(data){ console.log(data.length);//然后每次的最大值是65536，当还有数据在读取的时候，它会不断的读取 })

然后var pipe_count = file.size/65536; var pipe_count_flag ; var bai_yi = “”; var c = 0; if(pipe_count<=100){ pipe_count_flag = false; }else{ pipe_count_flag = true; bai_yi = ceil(pipe_count/100); }

ins.on(“data”,function(data){ if(data.length<65536){ return false; } if(!pipe_count_flag){ //这里用的socket.emit的写法，简单的可以用user_id+new Date()或者随机数，然后不断的发送回去读取的流，加在一起，再控制进度条的宽度就ok了！（emit的懒得没写全，大概就是这么个意思。） //soc.emit(“uploadprogress”,{progress_size: “65536”}); }else{ c++; if(c%bai_yi==0){ //soc.emit(“uploadprogress”,{progress_size: 65536*bai_yi}); } } });

在处理文件上传时，如果你希望在文件传输过程中显示进度条，可以通过监听文件读取流（Readable Stream）的事件来实现。具体来说，你可以使用 fs.createReadStream 创建一个可读流，并通过监听 data 和 progress 等事件来计算已读取的数据量。

以下是一个简单的示例代码，展示了如何在文件上传过程中使用滚动条显示进度：

const fs = require('fs');
const path = require('path');

// 假设 file.path 是源文件路径，而 `path` 是目标存储路径
const file = {
    path: 'sourceFilePath'
};

const sourcePath = file.path;
const targetPath = path.join(__dirname, 'targetFilePath');

const ins = fs.createReadStream(sourcePath);
const ous = fs.createWriteStream(targetPath);

let totalSize = fs.statSync(sourcePath).size;
let bytesRead = 0;

ins.on('data', (chunk) => {
    bytesRead += chunk.length;
    const progress = Math.round((bytesRead / totalSize) * 100);
    console.log(`Progress: ${progress}%`);
});

ins.pipe(ous);

解释：

  1. 初始化：首先我们定义了源文件路径 sourcePath 和目标文件路径 targetPath。
  2. 创建流：使用 fs.createReadStream 和 fs.createWriteStream 分别创建一个可读流和一个可写流。
  3. 获取总大小：通过 fs.statSync(sourcePath).size 获取源文件的总大小。
  4. 监听数据事件：通过监听 data 事件，我们可以捕获每次读取的数据块，并累加 bytesRead 计算已读取的字节数。
  5. 计算进度：每读取一次数据，就计算当前读取的进度百分比并打印出来。
  6. 管道操作：最后，我们将可读流连接到可写流，开始文件传输。

这样，你就可以在文件传输过程中实时显示进度条了。如果你想在前端页面中展示进度条，可以将进度信息发送给前端，通过前端代码动态更新进度条。

回到顶部