Node.js使用fs模組實現對本地圖片下載
阿新 • • 發佈：2019-02-06
使用node.js自帶的http模組與fs模組搭建了一個可以下載圖片的伺服器。
專案的github：https://github.com/junhaogz215/getImage
效果如下：
執行伺服器之後在位址列輸入http://localhost:3000可跳轉到index.html首頁
點選下載圖片即可下載相應圖片：
原始碼
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; box-sizing: border-box; } body { padding: 20px 20px; } li { list-style: none; width: 20%; float:left; } li { margin-right: 5%; } li img { width: 100%; } a { /* display: block; */ padding: 5px 10px; background: rgb(36, 152, 165); border-radius: 4px; color: #ffffff; text-decoration: none; } figcaption { margin: 10px 0; } </style> </head> <body> <ul> <li> <figure> <img src="./images/cat1.jpg" alt="cat1.jpg"> <figcaption><a href="http://localhost:3000/images/cat1.jpg">下載圖片</a></figcaption> </figure> </li> <li> <figure> <img src="./images/cat5.jpg" alt="cat1.jpg"> <figcaption><a href="http://localhost:3000/images/cat5.jpg">下載圖片</a></figcaption> </figure> </li> <li> <figure> <img src="./images/cat7.jpg" alt="cat1.jpg"> <figcaption><a href="http://localhost:3000/images/cat7.jpg">下載圖片</a></figcaption> </figure> </li> <li> <figure> <img src="./images/chuyin.jpg" alt="cat1.jpg"> <figcaption><a href="http://localhost:3000/images/chuyin.jpg">下載圖片</a></figcaption> </figure> </li> </ul> </body> </html>
getImage.js
var http = require('http'), fs = require('fs') var server = http.createServer((req, res) => { if ('GET' == req.method && '/images' == req.url.substr(0, 7) && '.jpg' == req.url.substr(-4)) { fs.stat(__dirname + req.url, (err, stat) => { //該回調函式用來判斷請求的資源是否為檔案如果不是檔案返回404 if (err || !stat.isFile()) { res.writeHead(404); res.end('Not Found'); return; } serve(__dirname + req.url, 'application/jpg'); }); } else if ('GET' == req.method && '/' == req.url) { serve(__dirname + '/index.html', 'text/html'); } else { res.writeHead(404); res.end('Not Found'); } //用來讀取檔案並把檔案響應給伺服器 function serve (path, type) { res.writeHead(200, {'content-type': type}); fs.createReadStream(path) .on('data', data => res.write(data)) .on('end', () => res.end()); } }) .listen(3000); server.listen(3000, () => { console.log('伺服器啟動成功，埠號：3000') });