1 前言

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

2 代码

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

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 用Express框架版本

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服务器读取图片返回给前端(浏览器)显示的更多相关文章

  1. python opencv 读取图片 返回图片某像素点的b,g,r值

    转载:https://blog.csdn.net/weixin_41799483/article/details/80884682 #coding=utf-8   #读取图片 返回图片某像素点的b,g ...

  2. Nodejs koa2读取服务器图片返回给前端直接展示

    参考:https://blog.csdn.net/lihefei_coder/article/details/105435358 const fs = require('fs'); const pat ...

  3. vue中图片返回404时,显示默认的图片

    图片返回404时候的处理 <img :src="userMsg.portrait" ref="img" alt=""> _thi ...

  4. img标签插入图片返回403,浏览器可以直接打开

    参考:https://segmentfault.com/q/1010000011752614/a-1020000011764026 博客园引入外部图片出现,出现403问题,应该是加了防盗链,会检测访问 ...

  5. NodeJS服务器退出:完成任务,优雅退出

    上一篇文章,我们通过一个简单的例子,学习了NodeJS中对客户端的请求(request)对象的解析和处理,整个文件共享的功能已经完成.但是,纵观整个过程,还有两个地方明显需要改进: 首先,不能共享完毕 ...

  6. img src某个php文件输出图片(回复更改图片readfile读取图片等)

    在论坛我们经常看到一回复图片就更改等,这功能是怎么实现的呢,其实更验证码道理相同. 新建文件 randimage.php 加入以下代码: <?php $dir='../../images/'; ...

  7. JAVA实现读取图片

    话不读说  直接上代码 package cn.kgc.ssm.common; import java.io.*; /** * @author * @create 2019-08-15 9:36 **/ ...

  8. ios 向sqlite数据库插入和读取图片数据

    向sqlite数据库插入和读取图片数据 (for ios) 假定数据库中存在表 test_table(name,image), 下面代码将图片文件test.png的二进制数据写到sqlite数据库: ...

  9. spring从服务器磁盘读取图片,然后显示于前端页面上

    需求是,前台通过传参,确定唯一图片,然后后台在服务器磁盘中读取该图片,然后显示于前台页面上. 后台代码: @RequestMapping("unit/bill/showeinvoice&qu ...

随机推荐

  1. vcf文件(call variants得来的)怎么看变异是纯合还是杂合的

    如下图片所示: 对于位置为48245131的allele来说,REF为A,ALT为C 想确定变异到底是纯合还是杂合,即两条染色体是否同时发生了变异,则看GT,GT对应的数值为0/1,说明该变异为杂合: ...

  2. 项目管理工具Maven的安装

    首先下载maven http://maven.apache.org/download.cgi 然后解压到不含中文和空格的目录,我直接解压到了D盘 然后添加环境变量: MAVEN_HOME:D:\apa ...

  3. dijkstra 的优先队列优化

    既然要学习算法,就要学习到它的精髓,才能够使用起来得心应手. 我还是远远不够啊. 早就知道,dijkstra 算法可以用优先队列优化,我却一直不知道该怎样优化.当时,我的思路是这样的:假设有n个顶点, ...

  4. KindEditor 4.1.2版本,在上传图片的时候 设置为绝对路径

    被这个问题困扰了很久,最终搞定,竟然是如此之简单.   方法如下: 1.打开编辑器目录下的:kindeditor.js 2.修改:urlType : ”, 为:urlType : ‘domain’, ...

  5. 化工pdf下载

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  6. MySQL_异常

    问题1 描述:在连接MYSQL数据库时出现问题:“ERROR 2003 (HY000): Can’t connect to MySQL server on ‘localhost’ (10061)” 分 ...

  7. MySQL 获得当前日期时间 函数【转】

    获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | now() | +---------- ...

  8. awk词频统计功能

    [root@test88 ~]# vim word_freq.sh #!/bin/bash if [ $# -ne 1 ];then echo "Usage: $0 filename&quo ...

  9. VUE2.0 饿了吗视频学习笔记(六):定位问题、文字显示、模糊背景图片、点击事件

    一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图 正常位置为 还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolut ...

  10. charCodeAt() 和charAt()

    charAt() 方法可返回指定位置的字符. charCodeAt() 方法可返回指定位置的字符的 Unicode 编码.这个返回值是 0 - 65535 之间的整数. 方法 charCodeAt() ...