Nodejs 怎么获得上传图片的进度数值并输出给我的iOS app用呢

Nodejs 怎么获得上传图片的进度数值并输出给我的iOS app用呢

我现在有个API是这样的：

app.post('/event', function (req, res) {
fs.readFile(req.files.displayImage.path, function (err, data) {
    var newPath = __dirname + '/uploads/' + req.files.displayImage.name;
    fs.writeFile(newPath, data, function (err) {
        if (!err) {
            var pic = req.files.displayImage.name;
            connection.query('INSERT INTO Event SET ?', {pic: pic}, function (error, result) {
                if (error) {
                    res.send(error, 400);
                } else {
                    res.send({insertId: result.insertId}, 200);
                }
            });
        }
    });
});
});

我想在我的iOS app里做一个上传进度条。但是我的API怎么才能把图片上传的进度值打印出来并输出给我的app用呢。哎！node都是边学边做，痛苦啊。


2 回复

为了在你的Node.js API中获取上传图片的进度并将其发送到iOS应用，你可以使用busboy或multer这类中间件来处理文件上传，并通过WebSocket或HTTP响应头等方式将进度信息传递给客户端。这里我将展示如何使用busboy来实现这一功能。

首先，你需要安装busboy：

npm install busboy

然后修改你的API代码以支持进度跟踪：

const express = require('express');
const Busboy = require('busboy');

const app = express();

app.post('/event', function (req, res) {
    const busboy = new Busboy({ headers: req.headers });

    let progress = 0;

    busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
        console.log(`File [${fieldname}] received.`);

        const saveTo = path.join(__dirname, '/uploads/', filename);

        file.on('data', function (data) {
            progress += data.length;
            console.log(`File [${filename}] got ${data.length} bytes`);
        });

        file.on('end', function () {
            console.log(`File [${filename}] Finished.`);
        });

        file.pipe(fs.createWriteStream(saveTo));
    });

    busboy.on('finish', function () {
        console.log("Done parsing form!");
        // 这里可以执行数据库操作等
        connection.query('INSERT INTO Event SET ?', { pic: filename }, function (error, result) {
            if (error) {
                res.send(error, 400);
            } else {
                res.send({ insertId: result.insertId }, 200);
            }
        });
    });

    req.pipe(busboy);
});

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

在这个例子中，我们使用Busboy来解析请求体中的文件流。每当接收到文件数据时，我们更新progress变量，并可以在控制台中看到当前的进度。对于实际的进度通知，你可能需要通过WebSocket或其他机制将这些更新推送到客户端。

注意：上述代码仅展示了如何计算文件上传的进度。要将此进度信息发送回iOS客户端，你需要实现额外的通信逻辑（例如，通过WebSocket、轮询或事件源）。


要在Node.js中实现文件上传的进度显示，并将进度信息传递给iOS应用，你可以使用busboy或multer等中间件来处理文件上传，并通过WebSocket或其他实时通信技术（如Server-Sent Events）将进度更新推送给客户端。

这里提供一个使用busboy和WebSocket的简单示例：

  1. 安装必要的库：
npm install busboy ws
  1. 示例代码：
const express = require('express');
const http = require('http');
const WebSocket = require('ws');
const busboy = require('busboy');

const app = express();
const server = http.createServer(app);

const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('Client connected');
  
  ws.on('message', (message) => {
    console.log('Received: %s', message);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

app.post('/event', (req, res) => {
  const bb = busboy({ headers: req.headers });
  
  bb.on('file', (fieldname, file, filename, encoding, mimetype) => {
    let uploadedBytes = 0;

    file.on('data', (data) => {
      uploadedBytes += data.length;
      
      // 发送进度到所有连接的客户端
      wss.clients.forEach((client) => {
        if (client.readyState === WebSocket.OPEN) {
          client.send(JSON.stringify({ progress: (uploadedBytes / file.size) * 100 }));
        }
      });
    });

    file.on('end', () => {
      const newPath = __dirname + '/uploads/' + filename;
      file.pipe(fs.createWriteStream(newPath));
    });
  });

  bb.on('finish', () => {
    res.send({ message: 'Upload finished' });
  });

  req.pipe(bb);
});

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

在这个例子中，我们使用busboy来处理文件上传，并监听文件上传的数据事件来计算上传进度。每当接收到数据时，我们会通过WebSocket将当前进度发送给所有已连接的客户端。这样，你的iOS应用就可以接收这些进度更新并在UI上显示上传进度了。

确保在iOS端也实现了相应的WebSocket连接来接收这些消息。

回到顶部