文件上传进度和解析 Form Data

最近有一个小需求:上传文件的时候显示上传进度(上传了百分之多少)。这个需求不难,比如以下代码就能实现:

进度条实现方式

监听 onprogress 事件,其中 e.loaded 表示已经上传了多少,e.total 表示总文件大小。如此一来,问题就解决了,进入舒适区。

有一个前提就是我们必须用 FormData 来发送文件,这样才能异步上传不刷新页面。用这种方式,我们来看看浏览器把什么数据发给了服务器:

至于怎么理解这种格式,我们稍后再说,可能也不会说。

解析 Form Data 格式数据

我们先在服务器拿到文件。我印象中在 PHP 里文件的数据放在一个全局变量里,直接拿来用就行了,但是在 nodejs 里情况有点复杂,我写了一个错误解析的代码,如下:

上面的代码解析文件会失败,但是字符串没有问题,看来解析二进制的文件没有我想的那么简单。那我就是使用了一个叫 formidable 的第三方依赖,用起来很简洁:

总结

在 node 里,使用像 formidable 这种第三方库,比较方便。想知道怎么具体解析包含二进制数据的 FormData,可以查看参考链接的源码。

参考链接

https://houbean.github.io/2017/02/22/Node-js-HTTP%E6%9C%8D%E5%8A%A1%E5%99%A8%E4%B8%AD%E7%9A%84%E6%96%87%E4%BB%B6%E3%80%81%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/

我们也可以看 formidable 的解析源码

Html5 File Upload with Progress

How does HTTP file upload work?

我要分享

曾小乱

作者: 曾小乱

喜欢写点有意思的东西

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据