自学 Node.js 五:学习 node-formidable

使用第三方包 node-formidable,需要通过 Node.js 的包管理 NPM 来安装外部包,我们已安装好的 Node.js 环境一般都已经默认把 NPM 安装到机器上,我们可以在 cmd 下通过命令行在 NPM 中安装 formidable 包:

npm install formidable

如下截图,成功安装formidable包:
 
我们可以通过formidable的官方demo来了解一下这个包是如何引入和使用的:
  1. var formidable = require('formidable'),
  2. http = require('http'),
  3. sys = require('sys');
  4. http.createServer(function(req, res) {
  5. if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
  6. // parse a file upload
  7. var form = new formidable.IncomingForm();
  8. //这里formidable会对upload的对象进行解析和处理
  9. form.parse(req, function(err, fields, files) {
  10. res.writeHead(200, {'content-type': 'text/plain'});
  11. res.write('received upload:\n\n');
  12. res.end(sys.inspect({fields: fields, files: files}));
  13. });
  14. return;
  15. }
  16. // show a file upload form
  17. res.writeHead(200, {'content-type': 'text/html'});
  18. res.end(
  19. '<formaction="/upload"enctype="multipart/form-data" '+
  20. 'method="post">'+
  21. '<inputtype="text"name="title"><br>'+
  22. '<inputtype="file"name="upload"multiple="multiple"><br>'+
  23. '<inputtype="submit"value="Upload">'+
  24. '</form>'
  25. );
  26. }).listen(8888); 

如果我们要做一个上传图片并预览的功能,需要做以下几点:

  • 通过formidable在start表单中添加一个文件上传元素(添加一个multipart/form-data的编码类型,移除此前的文本区,添加一个文件上传组件)
  • 在form.parse中处理上传的文件保存到本地,再输出到html上面。

当然一个上传功能包的使用并不是官方Demo说的那么简单,我们可以在WebStorm中看到node-formidable包的组成结构以及其内部函数,IncomingForm结构图如下:

  建议大家学习node-formidable前,先参照下面两篇文章:

For more complete information about compiler optimizations, see our Optimization Notice.