如果使用node+express作为后端的话，肯定是避免不了上传的，因此我们需要使用node+express来对图片或者其他文件进行上传。如果你不使用express也是可以的。这里我们需要使用到一个node插件formidable，这个插件主要提供的就是上传功能。下面开始我们的项目吧。
首先你得搭建node+express环境，如果不知道怎么搭建的，请自行百度，文章前半部分有关于环境搭建的说明。搭建完成后，我们需要安装formidable插件，在node中插件安装的方法就是直接使用命令，在项目当前目录下，直接执行npm install xxxx –save（xxxx是插件名称，–save则是将插件写入packge.json文件中）即可安装插件，如此安装formidable就使用以下命令即可：
1 | npm install formidable --sava |
也可以使用简写的命令
1 | npm i -S formidable //(i即install,-S,这里的s是大写的，即sava) |
安装完成之后，我们首先直接在index.ejs或者index.jade中添加一个表单form，内容如下：
1 | <form action="/upload" method="post" enctype='multipart/form-data'> |
2 | <input name="avatar" type="file" /> |
3 | <button type="submit">上 传</button> |
4 | </form> |
下面该是写上传功能的router了，通过express的router的post来实现上传，我们打开routers目录下的index.js添加下面的代码
1 | //在顶部代码中加入如下代码 |
2 | var formidable = require('formidable'); |
3 | var fs = require('fs'); |
4 | //在module.exports = router;之前添加下面的代码 |
5 | |
6 | //上传图片 |
7 | router.post('/upload', function(req, res, next){ |
8 | var AVATAR_UPLOAD_FOLDER = '/avatar/' //首先必须在public目录下创建一个名字为avatar的文件夹，否则上传会报错，因为此程序无法自动创建目录 |
9 | var form = new formidable.IncomingForm(); //创建上传表单 |
10 | form.encoding = 'utf-8'; //设置编辑 |
11 | form.uploadDir = 'public' + AVATAR_UPLOAD_FOLDER; //设置上传目录 |
12 | form.keepExtensions = true; //保留后缀 |
13 | form.maxFieldsSize = 2 * 1024 * 1024; //文件大小 |
14 | |
15 | form.parse(req, function(err, fields, files) { |
16 | |
17 | if (err) { |
18 | //res.locals.error = err; |
19 | res.json({'avatar':'error'}); //发生错误后输出json内容为avatar:error |
20 | return; |
21 | } |
22 | //设置允许上传的文件，这里我设置的是图片，你也可以直接设置成rar、zip、doc等 |
23 | var extName = ''; //后缀名 |
24 | switch (files.avatar.type) { //这里的avatar就是我们之前表单中input[type=file]的name值，别搞错了 |
25 | case 'image/pjpeg': |
26 | extName = 'jpg'; |
27 | break; |
28 | case 'image/jpeg': |
29 | extName = 'jpg'; |
30 | break; |
31 | case 'image/png': |
32 | extName = 'png'; |
33 | break; |
34 | case 'image/x-png': |
35 | extName = 'png'; |
36 | break; |
37 | } |
38 | //如果没有查找到.jpg、.png的后缀名，则提示错误信息 |
39 | if(extName.length == 0){ |
40 | //res.locals.error = '只支持png和jpg格式图片'; |
41 | res.json({'avatar':'不支持的类型'}); |
42 | return; |
43 | } |
44 | //重新修改文件名字，使用随机数作为图片名字 |
45 | var avatarName = Math.random() + '.' + extName; |
46 | var newPath = form.uploadDir + avatarName; |
47 | //得到上传后的图片相对路径 |
48 | console.log(newPath); |
49 | fs.renameSync(files.fulAvatar.path, newPath); //重命名 |
50 | //返回json，json内容为图片相对路径 |
51 | //res.locals.success = '上传成功'; |
52 | res.json({'avatar':newPath}); |
53 | }); |
54 | }); |
代码完成了，赶快输入http://localhost:3000查看效果吧，看看上传是否已经成功了。
另外如果想要了解formidable的api的童鞋，请直接移步到npm：https://www.npmjs.com/package/formidable