Nodejs进阶 基于express+multer的文件上传.docxVIP

Nodejs进阶基于express+multer的文件上传图片上传是web开发中经常用到的功能，node社区在这方面也有了相对完善的支持。常用的开源组件有multer、formidable等，借助这两个开源组件，可以轻松搞定图片上传。本文主要讲解以下内容，后续章节会对技术实现细节进行深入挖掘。作者：程序猿小卡_casper来源：segmentfault|2016-11-09 10:28?收藏??分享概览图片上传是web开发中经常用到的功能，node社区在这方面也有了相对完善的支持。常用的开源组件有multer、formidable等，借助这两个开源组件，可以轻松搞定图片上传。本文主要讲解以下内容，后续章节会对技术实现细节进行深入挖掘。基础例子：借助express、multer实现单图、多图上传。常用API：获取上传的图片的信息。进阶使用：自定义保存的图片路径、名称。关于作者程序猿小卡，前腾讯IMWEB团队成员，阿里云栖社区专家认证博主。欢迎加入 Express前端交流群(197339705)。正在填坑：《Nodejs学习笔记》 / 《Express学习笔记》社区链接：云栖社区 / github / 新浪微博 / 知乎 / Segmentfault / 博客园/ 站酷环境初始化非常简单，一行命令。npm?install?express?multer?multer?--save?每个示例下面，都有下面两个文件???upload-custom-filename?git:(master)???tree?-L?1?.?├──?app.js?#?服务端代码，用来处理文件上传请求?├──?form.html?#?前端页面，用来上传文件??基础例子：单图上传app.js。var?fs?=?require(fs);?var?express?=?require(express);?var?multer??=?require(multer)??var?app?=?express();?var?upload?=?multer({?dest:?upload/?});??//?单图上传?app.post(/upload,?upload.single(logo),?function(req,?res,?next){?????res.send({ret_code:?0});?});??app.get(/form,?function(req,?res,?next){?????var?form?=?fs.readFileSync(./form.html,?{encoding:?utf8});?????res.send(form);?});??app.listen(3000);??form.html。form?action=/upload-single?method=post?enctype=multipart/form-data?????h2单图上传/h2?????input?type=file?name=logo?????input?type=submit?value=提交?/form??运行服务。node?app.js?访问 :3000/form ，选择图片，点击“提交”，done。然后，你就会看到 upload 目录下多了个图片。基础例子：多图上传代码简直不能更简单，将前面的upload.single(logo) 改成upload.array(logo, 2) 就行。表示：同时支持2张图片上传，并且 name 属性为 logo。app.js。var?fs?=?require(fs);?var?express?=?require(express);?var?multer??=?require(multer)??var?app?=?express();?var?upload?=?multer({?dest:?upload/?});??//?多图上传?app.post(/upload,?upload.array(logo,?2),?function(req,?res,?next){?????res.send({ret_code:?0});?});??app.get(/form,?function(req,?res,?next){?????var?form?=?fs.readFileSync(./form.html,?{encoding:?utf8});?????res.send(form);?});??app.listen(3000);??form.html。form?action=/upload-multi?method=post?enctype=multipart/form-data?????h2多图上传/h2?????input?type=file?nam