本文节选自《Nodejs学习笔记》，更多章节和更新请访问github主页地址。欢迎加入群交流，群号197339705。概述图片上传是web开发中经常用到的功能，node社区在这方面也有比较完善的支持。常用的开源组件有multer、formidable等，借助这两个开源组件可以轻松完成图片上传。本文主要讲解以下内容，后续章节将深入挖掘技术实现细节。本文中的所有示例都有代码示例，可以在这里查看。基础示例：用express和multer实现单图和多图上传。常用API：获取上传图片信息。高级使用：自定义保存图片的路径和名称。作者简介程序原小卡，原腾讯IMWEB团队成员，阿里云栖社区专家博主。欢迎加入速递前端交流群（197339705）。填坑：《Nodejs学习笔记》/《Express学习笔记》社区链接：云栖社区/github/新浪微博/知乎/Segmentfault/博客园/酷环境的初始化很简单，一行命令。npminstallexpressmultermulter--save下面每个例子，都有以下两个文件?upload-custom-filenamegit:(master)?tree-L1.├──app.js#处理文件上传请求的服务器代码├──form.html#前端页面，用于上传文件基础示例：完整的单图上传示例代码请参考这里。应用程序。js。varfs=require('fs');varexpress=require('express');varmulter=require('multer')varapp=express();varupload=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){varform=fs.readFileSync('./form.html',{encoding:'utf8'});res.send(form);});app.listen(3000);form.html。单张图片上传
运行服务。Nodeapp.js访问http://127.0.0.1:3000/form，选择图片，点击“提交”，完成。然后，你会看到上传目录里多了图片。基本示例：完整的多图上传示例代码请参考这里。代码再简单不过了，将之前的upload.single('logo')改成upload.array('logo',2)即可。表示：支持同时上传2张图片，name属性为logo。应用程序。js。varfs=require('fs');varexpress=require('express');varmulter=require('multer')varapp=express();varupload=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){varform=fs.readFileSync('./form.html',{encoding:'utf8'});res.send(form);});应用程序。听（3000）；形式。HTML。多部分图片上传
同测试步骤，不再赘述。完整的示例代码请参考这里获取上传图片的信息。很多时候，除了将图片保存在服务器上，我们还需要做很多其他的事情，比如将图片的信息存储到数据库中。常用的原始文件名、文件类型、文件大小、本地保存路径等信息，借助multer，我们可以轻松获取这些信息。还是以上传单个文件为例。这时multer会将文件的信息写入到req.file中，如下代码所示。应用程序。js。varfs=require('fs');varexpress=require('express');varmulter=require('multer')varapp=express();varupload=multer({dest:'upload/'});//单张图片上传app.post('/upload',upload.single('logo'),function(req,res,next){varfile=req.file;console.log('文件类型:%s',file.mimetype);console.log('原文件名：%s',file.originalname);console.log('文件大小：%s',file.size);console.log('文件保存路径:%s',file.path);res.send({ret_code:'0'});});app.get('/form',function(req,res,next){varform=fs.readFileSync('./form.html',{encoding:'utf8'});res.send(form);});app.listen(3000);form.html。单张图片上传
启动服务，上传文件后，会在控制台看到打印出来的信息。文件类型：image/png原文件名：1.png文件大小：18379文件保存路径：upload/b7e4bb22375695d92689e45b551873d9自定义文件上传路径和名称有时候，我们想自定义文件上传路径和名称，multer也可以方便的实现.自定义本地存储路径非常简单。比如我们要上传文件到my-upload目录，只需要修改dest配置项即可。varupload=multer({dest:'upload/'});在上面的配置下，所有的资源都存放在同一个目录下。有时我们需要针对不同的文件进行个性化设置，这时可以参考下一节。自定义本地保存文件名的完整示例代码请参考这里。代码有点长，但同样简单。multer提供了storage参数来个性化资源存储路径和文件名。使用注意事项如下：destination：设置保存资源的路径。注意，如果没有这个配置项，默认会保存在/tmp/uploads下。另外，路径需要自己创建。filename：设置本地保存资源的文件名。应用程序。js。varfs=require('fs');varexpress=require('express');varmulter=require('multer')varapp=express();varcreateFolder=function(folder){try{fs.accessSync(文件夹）;}catch(e){fs.mkdirSync(文件夹);}};varuploadFolder='./upload/';createFolder(uploadFolder);//通过文件名属性自定义varstorage=multer.diskStorage({destination:function(req,file,cb){cb(null,uploadFolder);//保存路径，注意：需要自己创建},filename:function(req,file,cb){//设置保存文件名为字段名+时间戳，如logo-1478521468943cb(null,file.fieldname+'-'+Date.now());}});//通过存储选项自定义上传行为varupload=multer({storage:storage})//单张图片上传app.post('/upload',upload.single('logo'),function(req,res,next){varfile=req.file;res.send({ret_code:'0'});});app.get('/form',function(req,res,next){varform=fs.readFileSync('./form.html',{encoding:'utf8'});res.send(form);});app.listen(3000);form.html。单张图片上传
测试步骤就不详细说了，自己去看看效果就知道了。后面写的这篇文章介绍了multer的基本用法，并没有涉及太多理论性的东西。俗话说，授人以鱼不如授人以渔。在后面的章节中，我们将挖掘文件上传的细节，让读者朋友们加深对文件上传的理解。相关链接multer官方文档：https://github.com/expressjs/...
