【nodejs】简易的web在线文件浏览系统开发流程详解

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

在自家的路由器WiFi局域网内搭建一个web在线文件浏览系统用nodejs搭建很简单只需几步就完成了方便随时浏览文件资源。

准备

操作系统环境Windows或Linux
需要安装nodejs

文章目录

搭建web服务器
浏览目录功能
浏览文件功能
执行node命令

搭建web服务器

写一个server.js文件代码如下

const http = require('http');
const url = require('url');
const util = require('util');
const fs = require('fs');

const port = '3000';
const PATH_DIV = '/';
const CurrentPath = __dirname.replace(/\\/g,PATH_DIV);

let app = http.createServer(function (req, res) {
	let response='Hello World';
	try{
		const reqURL = url.parse(req.url, true);
		// response = util.inspect(reqURL);
		// console.log(reqURL.search)
		
		let filename = decodeURIComponent(reqURL.pathname);
		let path = CurrentPath+filename;
		// console.log('path',path)
		
		let stat = fs.statSync(path);
		if (stat.isFile()){
			//返回或下载文件资源...
		}else{
			//返回当前目录列表...
		}
	}catch(e){
		console.error(e);
		response='Server has error';
		
		res.writeHead(404,{'Content-Type':'text/plain; charset:utf-8;'});
		res.end(response);
	}
})

app.listen(port, () => {
	//console.log('Web Server URL:', 'http://'+(getLocalIP() || 'localhost')+':'+port);
	console.log('Http Server running at path ', CurrentPath)
})

浏览目录功能

查询路径返回网页展示列表
以下是返回当前文件夹目录列表的代码

let list = fs.readdirSync(path);
let parentPath='';
if(filename!=PATH_DIV) {
    parentPath = filename.substring(0,filename.lastIndexOf(PATH_DIV));
    parentPath = `<li><a href="${parentPath.length>0?parentPath:PATH_DIV}">..</a></li>`;
}
if(!filename.endsWith(PATH_DIV)) filename+=PATH_DIV;
response = `<html><head><meta charset="utf-8"/></head><body><ol>`
    +`${parentPath}${list.map(item=>{
        let target = /\.[^\.]+$/.test(item)?'_blank':'_self';
        return `<li><a target="${target}" href="${filename+item}">${item}</a></li>`;
    })}</ol></body></html>`;
contentType='text/html';
res.writeHead(200,{'Content-Type':contentType+'; charset:utf-8;'});
res.end(response);

如有报错Error: EISDIR: illegal operation on a directory, read
说明是没有权限
也可能是fs.readFileSync()读取的不是文件或路径不对引起的

浏览文件功能

以下是实现返回或下载文件资源的代码

let extname = filename.substring(filename.lastIndexOf('.')+1);
let contentType;
switch(extname){
	case 'html':
	case 'htm':
		contentType='text/html';
		break;
	case 'css':
		contentType='text/css';
		break;
	case 'js':
		contentType='application/x-javascript';
		break;
	case 'txt':
		contentType='text/plain';
		break;
	default:
}
if(contentType){
	res.writeHead(200,{'Content-Type':contentType+'; charset:utf-8;'});
	response=fs.readFileSync(path);
	res.end(response);
}
else{
	// let file = fs.readFileSync(filename);
	// console.log('response',filename);
	// 直接访问文件
	// res.redirect(filename);
	// return;
	// 二进制文件
	res.setHeader('Content-Type', 'application/octet-stream');
	//Invalid character in header content ["Content-Disposition"]  filename需要编码否则报这个错误
	// 直接下载
	// res.setHeader('Content-Disposition','attachment;filename='+encodeURIComponent(event.name));
	// 直接查看
	res.setHeader("Content-Disposition","inline;filename=" + encodeURIComponent(filename.substring(1)));
	res.setHeader('Content-Length',stat.size);
	fs.createReadStream(path).pipe(res);
}