广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Node.js如何实现图片上传和显示方法
  • 696
分享到

Node.js如何实现图片上传和显示方法

2024-04-02 19:04:59 696人浏览 八月长安
摘要

小编给大家分享一下node.js如何实现图片上传和显示方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:index.j

小编给大家分享一下node.js如何实现图片上传和显示方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

具体如下:

index.js

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {}
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;
server.start(router.route, handle);

server.js

var Http = require("http");
var url = require("url");
function start(route, handle) {
 function onRequest(request, response) {
  var pathname = url.parse(request.url).pathname;
  console.log("Request for " + pathname + " received.");
  route(handle, pathname, response, request);
 }
 http.createServer(onRequest).listen(3000);
 console.log("Server has started.");
}
exports.start = start;

requestHandlers.js

var querystring = require("querystring"),
  fs = require("fs"),
  fORMidable = require("formidable");
function start(response) {
  console.log("Request handler 'start' was called.");
  var body = '<html>'+
    '<head>'+
    '<meta http-equiv="Content-Type" content="text/html; '+
    'charset=UTF-8" />'+
    '</head>'+
    '<body>'+
    '<form action="/upload" enctype="multipart/form-data" '+
    'method="post">'+
    '<input type="file" name="upload" multiple="multiple">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';
  response.writeHead(200, {"Content-Type": "text/html"});
  response.write(body);
  response.end();
}
function upload(response, request) {
  console.log("Request handler 'upload' was called.");
  var form = new formidable.IncomingForm();
  form.uploadDir = "D:\\min\\nodejsExample2\\tmp";
  console.log("about to parse1");
  form.parse(request, function(error, fields, files) {
    console.log("parsing done");
    console.log(files.upload.path);
    fs.renameSync(files.upload.path, "D:\\min\\nodejsExample2\\tmp\\test.png");
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write("received image:<br/>");
    response.write("<img src='/show' />");
    response.end();
 });
}
function show(response) {
  console.log("Request handler 'show' was called.");
  fs.readFile("D:\\min\\nodejsExample2\\tmp\\test.png", "binary", function(error, file) {
    if(error) {
      response.writeHead(500, {"Content-Type": "text/plain"});
      response.write(error + "\n");
      response.end();
    } else {
      response.writeHead(200, {"Content-Type": "image/png"});
      response.write(file, "binary");
      response.end();
    }
  });
}
exports.start = start;
exports.upload = upload;
exports.show = show;

router.js

function route(handle, pathname, response, request) {
  console.log("About to route a request for " + pathname);
  if (typeof handle[pathname] === 'function') {
    handle[pathname](response, request);
  } else {
    console.log("No request handler found for " + pathname);
    response.writeHead(404, {"Content-Type": "text/html"});
    response.write("404 Not found");
    response.end();
  }
}
exports.route = route;

result:

Node.js如何实现图片上传和显示方法

Node.js如何实现图片上传和显示方法

Node.js如何实现图片上传和显示方法

知识点:

其中用到了fs模块的readFile读取文件,它有同步和异步两个版本。node.js中,并不是所有的api都提供了异步和同步版本,node.js不鼓励使用同步I/O。

//this is async 异步

var fs = require('fs');
fs.readFile('file.txt', 'utf-8', function(err, data){
  if (err){
    console.error(err);
  } else {
    console.log(data);
  }
});
//this is sync 同步
var fs = require('fs');
var data = fs.readFileSync('file.txt', 'utf-8');
console.log(data);
console.log('end.');

以上是“Node.js如何实现图片上传和显示方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网JavaScript频道!

--结束END--

本文标题: Node.js如何实现图片上传和显示方法

本文链接: https://www.lsjlt.com/news/68978.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Node.js如何实现图片上传和显示方法
    小编给大家分享一下Node.js如何实现图片上传和显示方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体如下:index.j...
    99+
    2022-10-19
  • element-ui如何实现上传图片后清空图片显示
    这篇文章主要为大家展示了“element-ui如何实现上传图片后清空图片显示”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“element-ui如何实现上传图片后...
    99+
    2022-10-19
  • java怎么实现图片上传并显示
    在Java中实现图片上传并显示的一种常见的方法是使用Servlet和JSP。下面是一个简单的示例代码: 创建一个Servlet类来...
    99+
    2023-10-24
    java
  • 从零开始学习Node.js系列教程三:图片上传和显示方法示例
    本文实例讲述了Node.js图片上传和显示方法。分享给大家供大家参考,具体如下: index.js var server = require("./server"); var router = requ...
    99+
    2022-06-04
    示例 图片上传 从零开始
  • django实现图片上传数据库并显示
    Django文件上传,供大家参考,具体内容如下 需求 1、完成学生信息注册操作 2、将学生信息入库 3、将上传文件存放至项目下media文件夹下 4、显示所有学生信息 创建模型类 ...
    99+
    2022-11-12
  • uniapp上传图片和上传视频的实现方法
    目录上传图片上传视频扩展补充:上传文件实例总结基于 uniapp 的应用上传图片/视频 资源的实现: 功能涉及的主要 uniapp API 如下: 1.选择图片:uni.choose...
    99+
    2023-01-17
    uniapp上传视频文件 uniapp 上传图片 vue视频上传
  • DEDE图片集上传图片时出错显示(FILEID)的解决方法
    某日,某使用DeDe cms v5.5的网站在后台上传图片时出现如下错误: 作为web生手的我很是迷茫。印象里之前并没有做什么改动,于是百思不得其解。Google、百度、DeDe官网搜索了一大圈,发现有这个问题的人不少,...
    99+
    2022-06-12
    DEDE 图片集 上传图片
  • ajax如何上传图片到PHP并压缩图片显示
    本篇内容主要讲解“ajax如何上传图片到PHP并压缩图片显示”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ajax如何上传图片到PHP并压缩图片显示”吧!HTML代码<div i...
    99+
    2023-06-08
  • 发送ajax请求如何实现上传图片显示在网页上
    这篇“发送ajax请求如何实现上传图片显示在网页上”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2022-10-19
  • JavaScript实现显示和隐藏图片的方法
    这篇文章给大家分享的是有关JavaScript实现显示和隐藏图片的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为JavaSc...
    99+
    2023-06-14
  • SpringBoot2.0如何实现多图片上传加回显
    这篇文章主要为大家展示了“SpringBoot2.0如何实现多图片上传加回显”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“SpringBoot2.0如何实现多图片上传加回显”这篇文章吧。上传Co...
    99+
    2023-06-20
  • VUE如何实现选择上传图片并页面显示功能
    这篇文章给大家分享的是有关VUE如何实现选择上传图片并页面显示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下dem...
    99+
    2022-10-19
  • vue+ bootstrap如何实现图片上传图片展示功能
    这篇文章给大家分享的是有关vue+ bootstrap如何实现图片上传图片展示功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图如下所示:html..... ..........
    99+
    2022-10-19
  • SpringMVC如何实现多个文件上传及上传后立即显示图片功能
    这篇文章主要为大家展示了“SpringMVC如何实现多个文件上传及上传后立即显示图片功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“SpringMVC如何实现多个文件上传及上传后立即显示图片功...
    99+
    2023-05-31
    springmvc
  • Flask接收上传图片方法实现
    目录方案一:下面是复杂的写法:方案二:下面是简单写法:接下来给搭建讲解Flask如何接受图片文件,上面是复杂写法,下面是简单写法,二选一即可。 思路整理:接收图片->定义一个图...
    99+
    2022-11-11
  • node.js中实现kindEditor图片上传功能的方法教程
    前言 最近由于工作需要使用在线编辑器,找了几个对比了下KindEditor还是不错的,国产的但文档还是不全,还好能参考官方插件,kindEditor官网上中提供了ASP,ASP.NET,JSP相关的整合应用...
    99+
    2022-06-04
    图片上传 功能 方法
  • php上传图片后不能显示如何解决
    这篇“php上传图片后不能显示如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php上传图片后不能显示如何解决”文章吧...
    99+
    2023-07-05
  • 基于Springboot+vue如何实现图片上传至数据库并显示
    这篇文章主要讲解了“基于Springboot+vue如何实现图片上传至数据库并显示”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于Springboot+vue如何实现图片上传至数据库并显示...
    99+
    2023-07-06
  • React+react-dropzone+node.js实现图片上传的示例代码
    本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片。当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了。 第一步...
    99+
    2022-06-04
    示例 图片上传 代码
  • Node.js如何实现分片上传
    这篇文章主要介绍了Node.js如何实现分片上传的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Node.js如何实现分片上传文章都会有所收获,下面我们一起来看看吧。大文件上传会...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作