Nodejs server reads pictures back to front end (browser) display

Source: Internet
Author: User

Tags: Express container BSP Body node image TPS Support status

1 Preface

Project needs to use Nodejs server to the front-end transmission of pictures, online to find a lot of information, most of them are how to upload pictures at the front, and then by looking at the runoob.com Novice tutorial, found in fact is very simple, with express framework on the line.

2 Code

2.1 With native version (includes back page function)

?
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 var http = require(‘http‘);var fs = require(‘fs‘);var url = require(‘url‘);// 创建服务器http.createServer( function (request, response) {     // 解析请求,包括文件名   var pathname = url.parse(request.url).pathname;   // 输出请求的文件名   console.log("Request for " + pathname + " received.");   // 从文件系统中读取请求的文件内容   fs.readFile(pathname.substr(1), function (err, data) {   var urlContent = 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‘});        var imageFilePath = pathname.substr(1);        var stream = fs.createReadStream( imageFilePath );        var responseData = [];//存储文件流        if (stream) {//判断状态            stream.on( ‘data‘, function( chunk ) {              responseData.push( chunk );            });            stream.on( ‘end‘, function() {               var finalData = Buffer.concat( responseData );               response.write( finalData );               response.end();            });        }                    }   }else if(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 with Express Framework version

?
1234567891011121314151617181920212223242526272829 var express = require(‘express‘);var app = 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.");})var server = app.listen(80, function () {  console.log(‘Server running at http://127.0.0.1:80/‘);})

Nodejs server reads pictures back to front end (browser) display

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: