这是用nodejs写的上传图片

qbhgy 2018-10-11 原文

最近刚接触nodejs有点懵

上传图片的话,首先得有一个html页面下面是一个非常非常LOW的上传图片的页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <form action="/dopost" method="post" enctype="multipart/form-data">
 9         图片:<input type="file" name="image"><br/>
10         <button>提交</button><br/>
11     </form>
12 </body>
13 </html>

上传文件三要素可以复习一下

然后就是nodejs的代码,再做这个之前 nodejs 必须要自行安装俩个模块:

silly-datetime (时间模块后面也可加 –save)

formidable (处理上传文件的模块自行了解一下)

直接命令安装就可以!

下面就是上传图片的代码:

 1 // formidable  这个模块是用来处理上传文件的
 2 
 3 var http = require('http');
 4 var fs = require('fs');
 5 var path = require('path');
 6 // 时间模块
 7 var datetime = require('silly-datetime');
 8 // 文件上传模块
 9 var formidable = require('formidable');
10 
11 
12 var hostname = '127.0.0.1';
13 var port = '3000';
14 
15 var server = http.createServer(function (req,res) {
16     // 处理请求和响应
17     // 屏蔽 favicon.ico
18     if(req.url == '/favicon.ico') {return};
19     if(req.url == '/formfile') {
20 
21     // ./formfile.html 就是一个简单的html页面
22     // 拥有form 能提交文件即可
23         fs.readFile('./formfile.html',function(err,data) {
24             res.end(data);
25         });
26     // dopost 是form表单中的action
27     }else if (req.url == '/dopost' && req.method.toLowerCase() == 'post') {
28         // 用formidable 来处理上传文件
29         var form = new formidable.IncomingForm();
30 
31         // 设置上传文件 存放位置
32         form.uploadDir = "./uploads";
33 
34         form.parse(req,function(err,fields,files) {
35 
36             console.log(fields);
37             console.log(files);
38 
39             // 改文件名
40             // 时间 + 随机数 + 后缀(文件名)
41 
42             // 引入的时间模块  silly-datetime 可自行下载
43             var time = datetime.format(new Date(),'YYYYMMDDHHmmss');
44             // 生产5位的随机数
45             var num = parseInt(Math.random()*100000);
46             // 获取上传文件的文件名
47             var extname = path.extname(files.image.name);
48 
49             // 获取旧名字
50             // __dirname 代表当前项目 的根目录
51             // 拼凑完整路径
52             var oldname = __dirname + '/' + files.image.path;
53 
54             // 拼接新名
55             var newname = __dirname + '/uploads/'+ time + num + extname;
56             // 执行改名
57             fs.rename(oldname , newname,function(err){
58                 res.writeHead(200,{"Content-Type":"text/html;charset = utf-8"});
59                 res.end('ok');
60             });
61         });
62 
63     }else{
64         res.end('404');
65     }
66 
67 });
68 
69 
70 // function  可写可不写
71 server.listen(port,hostname,function(){
72     //这里的function 可省略 ...
73     console.log('我们都太假装');
74 });