Express 4.x, socket.io, formidable文件的上传(进度条)、下载

简介: Express 4.x, socket.io, formidable文件的上传(进度条)、下载

A{G0V70]ZO4MJ}O~`0{L{WH.png

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第22天,点击查看活动详情


What I Learned


接触Node.js也有十来天了,算是学点新东西。The best way to learn something new is to use it. 学习新知识最好的方式莫过于去使用它(do something),在自然语言、编程语言的习得过程中尤为如此。


  1. Express 4.x:
  • 静态文件引用;
  • 路由;
  • get,set自定义属性;
  1. socket.io
  • 基本事件触发、响应;服务器、客户端之间的实时通信;
  • 这个功能不要太强大。。还需继续挖掘;
  1. 模板引擎EJS(Embedded JavaScript),较简单,跟Jekyll的Liquid语法有一拼;
  2. 文件上传模块formidable
  • 文件上传;
  • 计算md5;
  1. path模块:path.join(); path.extname();
  2. 原生JavaScript的知识点巩固:
  • DOM操作;
  • Map操作;
  • Date转换;
  • 对象封装;
  • 正则表达式;

Features


  • 最后长这样子:


S(QP5JSNVQHA6YJ%4N_@1K1.png

  • 作为应用Express 4.x与socket.io的小例子,实现文件的上传、下载;

关键是如何通过socket.io实现前后端的实时通信:在routes中使用socket触发文件上传进度事件。

  • 前端上传进度条:显示上传进度,用div宽度模拟,比较简陋;
  • 点击文件名可下载:相对上传,下载简单多了,通过response的download方法实现;
  • 文件去重:在上传过程中通过formidable提供的form.hash='md5'计算文件唯一标识,保证上传后的文件不重复;
  • 客户端校验:用户输入后,简单的文件名合法性校验;

Let's code


  • Server Side : app.js


var express = require('express');
var path = require('path');
var app = express();
var port = 8888;
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// include static files
app.use(express.static(path.join(__dirname, 'public')));
// upload destination setup
app.set('files', path.join(__dirname, '/public/files'));
var index = require('./routes/index');
// router
app.get('/upload', index.list);
app.post('/upload', index.submit(app.get('files')));
app.get('/file/:id/download', index.download(app.get('files')));
var server = app.listen(port);
console.log("Listening on port: " + port);
var io = require('socket.io')(server);
app.set('socketio', io); // store a reference to the io object, can be passed to routes

  • Router - Form and File List: index.js


var formidable = require('formidable');
var fs = require('fs');
var path = require('path');
var fileUploaded = new Map(); // store uploaded files
exports.list = function (req, res) {
  res.render('index', {
    title: "File upload",
    fileUploaded: fileUploaded
  });
};
• Router - Submit and Upload: index.js
javascript
exports.submit = function (dir) {
  return function (req, res, next) {
    var form = new formidable.IncomingForm();
    // high level formidable API
    form.uploadDir = dir; // set destination
    form.hash = 'md5'; // use hash algorithm, we can get hash value by 'file.hash'
    form.parse(req, function (err, fields, files) {
      // console.log(fields);
      // console.log(files);
      files.file.lastModifiedDate = files.file.lastModifiedDate.toLocaleString();
      var f = {
        newName: fields.name.length == 0
          ? files.file.name
          : fields.name + path.extname(files.file.name),
        file: files.file
      };
      if (fileUploaded.has(files.file.hash)) {
        form.emit('aborted'); // doesn't work!?
        console.log('aborted');
      } else {
        fileUploaded.set(files.file.hash, f); // add to map
      }
      fs.rename(files.file.path, path.join(form.uploadDir, files.file.name), function (err) {
        if (err) {
          console.log(err);
        }
        res.redirect('/upload');
        console.log('Finished.');
      });
    });
    var io = req.app.get('socketio'); // get reference to socket.io
    // listening progress event and send data to client
    form.on('progress', function (bytesReceived, bytesExpected) {
      var percent = Math.floor(bytesReceived / bytesExpected * 100);
      console.log(percent);
      var progress = {
        name: 'progress',
        percent: percent
      };
      // emit event : progress
      io.emit('progress', progress); //notify all client, no session here
    });
  }
};

• Router - Download :index.js

exports.download = function (dir) {
  return function (req, res, next) {
    var id = req.params.id;
    var file = fileUploaded.get(id);
    var targetPath = path.join(dir, file.file.name);
    // second parameter can be used to specify file name
    res.download(targetPath, file.newName);
  };
};

• Layout(only part of the file): index.ejs

<table>
<caption>Uploaded Files</caption>
<thead>
<tr>
  <th>Name</th>
  <th>Size</th>
  <th>Type</th>
  <th>DateTime</th>
  <!--<th>Details</th>-->
</tr>
</thead>
<tbody>
<% fileUploaded.forEach(function(item, key, mapObj) { %>
<tr>
  <td><a href='/file/<%=key%>/download'><%=item.newName%></a></td>
  <td><%=item.file.size%></td>
  <td><%=item.file.type%></td>
  <td><%=item.file.lastModifiedDate%></td>
  <!--lastModifiedDate, mtime???-->
  <!--<td><%=JSON.stringify(item.file)%></td>-->
</tr>
<%})%>
</tbody>
</table>

• Client Validation(only part of the file): client.js

// client validation
function validateInput() {
  var uploadButton = document.forms[0].upload;
  uploadButton.onclick = function () {
    var file = document.forms[0].file.value;
    if (file.length == 0) {
      document.getElementById('uploadProgress').innerText = 'No file selectd!';
      return false;
    }
    var name = document.forms[0].name.value;
    if (name.length != 0) {
      var invalidChars = name.match(/[^a-zA-Z0-9_()\u4e00-\u9fa5]+/g); // match invalid file name
      if (invalidChars.length != 0) {
        document.getElementById('uploadProgress').innerText = 'Invalid file name!';
        return false;
      }
    }
  }
}
// communication between client and server using socket.io
function getUploadProgressFromServer() {
  var socket = io.connect("http://localhost:8888");
  var uploadProgress = document.getElementById("uploadProgress");
  var bar = document.getElementById('bar');
  socket.on("progress", function (data) {
    if ("progress" === data.name) {
      uploadProgress.innerText = data.percent + '%';
      bar.style.width = data.percent / 100 * document.body.offsetWidth + 'px';
    } else {
      console.log("There is nothing.", data);
    }
  });
}

Notes:


  1. 为简单起见,后端触发上传进度事件时,通过broadcast方式通知所有客户端,所以当多个客户端(可用两个不同的浏览器模拟)在传文件时,会在所有的窗口内显示进度,更好的实现方式应该是使用socket.io的Session;
  2. 前端上传进度条、已上传文件列表的实现、样式等均比较粗糙,未使用bootstrap美化,不过作为Demo型程序,已经足够;
  3. 目前该程序上传的文件放在服务器指定目录下,但记录仅保存在内存中,未涉及DB;如果有兴趣,可做些扩展,将上传记录持久化至DB中,比如常用的MongoDB,MySQL,SQLite甚至SQLServer,node社区提供了各种好用的module
  4. 理论上应该可以传输各种格式的文件;另外,该示例中并未限制上传文件的大小,如有需要可查阅formidable的相关文档;其实node中用于文件上传的module非常多,比较成熟、常用的有multer,formidable,multiparty等,感兴趣的话都可以用一用;

Problems:


  1. 对重复文件上传操作:虽然能保证服务器端仅保留一份,但由于这里计算md5的方式只能等文件流获取完毕才能计算(推测),所以依然会进行上传操作,这在文件较大时……简直了!是否可先计算文件md5(采用crypto模块),对比已上传文件的md5,如果不存在,再进行上传?
  2. formidable的file对象,传至客户端页面(index.ejs中,已注掉),直接输出为:

{"size":102056,
"path":"D:\\...\\uploadProgress\\public\\files\\upload_0dcfbb98abc3b2c7356f87f218df715b",
"name":"debug.log",
"type":"application/octet-stream",
"mtime":"2017-04-26 20:58:08",
"hash":"40f2f78bff67c9e6164aa790f9627d83"}
  • 很明显,其中包含mtime(最终修改时间);然而,当通过file.mtime获取该属性时,竟然是undefined,但是可通过file.lastModifiedDate来获取此属性,也是醉了,这到底是什么原因??

  1. 上述问题,如您知道原因,还请不吝赐教,非常感谢!

Source Code: Github


If you have any questions or any bugs are found, please feel free to contact me.

Your comments and suggestions are welcome!

目录
相关文章
|
7月前
|
Java Unix Go
【Java】(8)Stream流、文件File相关操作,IO的含义与运用
Java 为 I/O 提供了强大的而灵活的支持,使其更广泛地应用到文件传输和网络编程中。!但本节讲述最基本的和流与 I/O 相关的功能。我们将通过一个个例子来学习这些功能。
294 1
|
11月前
|
XML JSON Go
Go语言中的文件与IO:JSON、CSV、XML处理
本文介绍了 Go 语言中对 JSON、CSV 和 XML 三种常见数据格式的处理方法。通过标准库 `encoding/json`、`encoding/csv` 和 `encoding/xml`,可以实现结构体与数据格式之间的序列化与反序列化。JSON 适合 Web API 和前后端通信,因其清晰易读;CSV 适用于表格数据和轻量级交换;XML 则支持复杂嵌套结构,常用于配置文件和 SOAP 协议。文中提供代码示例,涵盖基本使用、嵌套结构处理及实战建议,帮助开发者高效操作这些格式。
|
11月前
|
Unix Go
Go语言中的文件与IO:文件读写
本文介绍了 Go 语言中文件操作的基础方法,涵盖打开与关闭文件、读取和写入文件内容、追加写入以及复制文件等功能。通过 `os`、`bufio` 和 `io` 等标准库包,提供了高效且灵活的实现方式,如使用 `os.ReadFile` 读取整个文件、`bufio.Scanner` 逐行读取、`os.Create` 创建文件以及 `io.Copy` 复制文件内容。同时强调了错误处理的重要性,例如使用 `defer` 确保文件关闭,并推荐注意文件权限设置(如 UNIX 系统中的 `0644`)。最后以表格形式总结了常用操作及其推荐方法,便于快速查阅和应用。
|
11月前
|
Go 数据处理
Go语言中的文件与IO:bufio 和 scanner
Go 标准库中的 `bufio` 包高效读写功能,适用于文件和数据处理。`bufio.Reader` 支持按行或分隔符读取,`bufio.Writer` 提供高性能写入并需调用 `Flush()` 确保数据写入。`bufio.Scanner` 是处理文本文件(如日志、配置)的利器,可按行、单词等分割内容。本文详解其用法,并给出实践建议,如统计字符数、模拟 `tail -f` 和词频分析等。
|
存储 网络协议 Linux
【Linux】进程IO|系统调用|open|write|文件描述符fd|封装|理解一切皆文件
本文详细介绍了Linux中的进程IO与系统调用,包括 `open`、`write`、`read`和 `close`函数及其用法,解释了文件描述符(fd)的概念,并深入探讨了Linux中的“一切皆文件”思想。这种设计极大地简化了系统编程,使得处理不同类型的IO设备变得更加一致和简单。通过本文的学习,您应该能够更好地理解和应用Linux中的进程IO操作,提高系统编程的效率和能力。
664 34
|
Java 测试技术 Maven
Maven clean 提示文件 java.io.IOException
在使用Maven进行项目打包时,遇到了`Failed to delete`错误,尝试手动删除目标文件也失败,提示`java.io.IOException`。经过分析,发现问题是由于`sys-info.log`文件被其他进程占用。解决方法是关闭IDEA和相关Java进程,清理隐藏的Java进程后重新尝试Maven clean操作。最终问题得以解决。总结:遇到此类问题时,可以通过任务管理器清理相关进程或重启电脑来解决。
|
存储 Java API
【JavaEE】——文件IO(万字长文)
文件路径,文本文件,二进制文件,File类,文件流,字节流(InputStream,OutputStream)字符流(Reader,Writer)
|
Java 大数据 API
Java 流(Stream)、文件(File)和IO的区别
Java中的流(Stream)、文件(File)和输入/输出(I/O)是处理数据的关键概念。`File`类用于基本文件操作,如创建、删除和检查文件;流则提供了数据读写的抽象机制,适用于文件、内存和网络等多种数据源;I/O涵盖更广泛的输入输出操作,包括文件I/O、网络通信等,并支持异常处理和缓冲等功能。实际开发中,这三者常结合使用,以实现高效的数据处理。例如,`File`用于管理文件路径,`Stream`用于读写数据,I/O则处理复杂的输入输出需求。
906 12
|
编解码 Java 程序员
【文件IO】文件内容操作
【文件IO】文件内容操作
250 3
|
搜索推荐 索引
【文件IO】实现:查找文件并删除、文件复制、递归遍历目录查找文件
【文件IO】实现:查找文件并删除、文件复制、递归遍历目录查找文件
241 2