1. 首页
  2. HTML/CSS
  3. nodejs服务器读取图片返回给前端，浏览器显示

nodejs服务器读取图片返回给前端，浏览器显示

•HTML/CSS•阅读 863

1 前言

项目需要用nodejs服务器给前端传递图片，网上找了好多资料，多数都是怎么在前端上传图片的，然后通过看runoob.com菜鸟教程，发现其实是非常简单，用express框架就行了。

2 代码

2.1 用原生的版本（包含了返回网页功能）

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

varhttp = require('http');

varfs = require('fs');

varurl = require('url');

// 创建服务器

http.createServer(function(request, response) {

// 解析请求，包括文件名

varpathname = url.parse(request.url).pathname;

// 输出请求的文件名

console.log("Request for "+ pathname +" received.");

// 从文件系统中读取请求的文件内容

fs.readFile(pathname.substr(1),function(err, data) {

varurlContent = pathname.substr(1);

if(urlContent.lastIndexOf("png") > -1){

if(err) {

console.log(err);

// HTTP 状态码: 404 : NOT FOUND

// Content Type: text/plain

response.writeHead(404, {'Content-Type':'text/html'});

}else{

// HTTP 状态码: 200 : OK

// Content Type: text/plain

response.writeHead(200, {'Content-Type':'image/png'});

varimageFilePath = pathname.substr(1);

varstream = fs.createReadStream( imageFilePath );

varresponseData = [];//存储文件流

if(stream) {//判断状态

stream.on('data',function( chunk ) {

responseData.push( chunk );

});

stream.on('end',function() {

varfinalData = Buffer.concat( responseData );

response.write( finalData );

response.end();

});

}

}

}elseif(urlContent.lastIndexOf("html") > -1){

　　if(err) {

console.log(err);

// HTTP 状态码: 404 : NOT FOUND

// Content Type: text/plain

response.writeHead(404, {'Content-Type':'text/html'});

}else{

// HTTP 状态码: 200 : OK

// Content Type: text/plain

response.writeHead(200, {'Content-Type':'text/html'});

// 响应文件内容

response.write(data.toString());

}

// 发送响应数据

response.end();

}else{

console.log("unSupport Type, Please contact Administrator err url="+urlContent);

}

});

}).listen(80);

　2.2 用Express框架版本

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

varexpress = require('express');

varapp = express();

app.use(express.static('public'));

app.get('/public/images/*',function(req, res) {

res.sendFile( __dirname +"/"+ req.url );

console.log("Request for "+ req.url +" received.");

})

app.get('/public/html/index.html',function(req, res) {

res.sendFile( __dirname +"/"+"/public/html/index.html");

console.log("Request for "+ req.url +" received.");

})

//如果访问网页和本地同名，可以使用以下版本

app.get('/public/html/*.html',function(req, res) {

res.sendFile( __dirname +"/"+ req.url );

console.log("Request for "+ req.url +" received.");

})

app.get('/public/register',function(req, res) {

res.sendFile( __dirname +"/"+"/public/html/register.html");

console.log("Request for "+ req.url +" received.");

})

varserver = app.listen(80,function() {

console.log('Server running at http://127.0.0.1:80/');

})

1 前言

项目需要用nodejs服务器给前端传递图片，网上找了好多资料，多数都是怎么在前端上传图片的，然后通过看runoob.com菜鸟教程，发现其实是非常简单，用express框架就行了。

2 代码

2.1 用原生的版本（包含了返回网页功能）

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

varhttp = require('http');

varfs = require('fs');

varurl = require('url');

// 创建服务器

http.createServer(function(request, response) {

// 解析请求，包括文件名

varpathname = url.parse(request.url).pathname;

// 输出请求的文件名

console.log("Request for "+ pathname +" received.");

// 从文件系统中读取请求的文件内容

fs.readFile(pathname.substr(1),function(err, data) {

varurlContent = pathname.substr(1);

if(urlContent.lastIndexOf("png") > -1){

if(err) {

console.log(err);

// HTTP 状态码: 404 : NOT FOUND

// Content Type: text/plain

response.writeHead(404, {'Content-Type':'text/html'});

}else{

// HTTP 状态码: 200 : OK

// Content Type: text/plain

response.writeHead(200, {'Content-Type':'image/png'});

varimageFilePath = pathname.substr(1);

varstream = fs.createReadStream( imageFilePath );

varresponseData = [];//存储文件流

if(stream) {//判断状态

stream.on('data',function( chunk ) {

responseData.push( chunk );

});

stream.on('end',function() {

varfinalData = Buffer.concat( responseData );

response.write( finalData );

response.end();

});

}

}

}elseif(urlContent.lastIndexOf("html") > -1){

　　if(err) {

console.log(err);

// HTTP 状态码: 404 : NOT FOUND

// Content Type: text/plain

response.writeHead(404, {'Content-Type':'text/html'});

}else{

// HTTP 状态码: 200 : OK

// Content Type: text/plain

response.writeHead(200, {'Content-Type':'text/html'});

// 响应文件内容

response.write(data.toString());

}

// 发送响应数据

response.end();

}else{

console.log("unSupport Type, Please contact Administrator err url="+urlContent);

}

});

}).listen(80);

　2.2 用Express框架版本

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

varexpress = require('express');

varapp = express();

app.use(express.static('public'));

app.get('/public/images/*',function(req, res) {

res.sendFile( __dirname +"/"+ req.url );

console.log("Request for "+ req.url +" received.");

})

app.get('/public/html/index.html',function(req, res) {

res.sendFile( __dirname +"/"+"/public/html/index.html");

console.log("Request for "+ req.url +" received.");

})

//如果访问网页和本地同名，可以使用以下版本

app.get('/public/html/*.html',function(req, res) {

res.sendFile( __dirname +"/"+ req.url );

console.log("Request for "+ req.url +" received.");

})

app.get('/public/register',function(req, res) {

res.sendFile( __dirname +"/"+"/public/html/register.html");

console.log("Request for "+ req.url +" received.");

})

varserver = app.listen(80,function() {

console.log('Server running at http://127.0.0.1:80/');

})

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。