這是用nodejs寫的上傳圖片

時間 2020-05-06

標籤這是 nodejs 寫的上傳圖片简体版

原文原文鏈接

最近剛接觸nodejs有點懵html

上傳圖片的話,首先得有一個html頁面下面是一個很是很是LOW的上傳圖片的頁面node

 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>

上傳文件三要素能夠複習一下dom

而後就是nodejs的代碼,再作這個以前 nodejs 必需要自行安裝倆個模塊: post

silly-datetime (時間模塊後面也可加 --save)ui

formidable (處理上傳文件的模塊自行了解一下)url

直接命令安裝就能夠!spa

下面就是上傳圖片的代碼:3d

 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 });