广告
返回顶部
首页 > 资讯 > 精选 >nodejs如何实现简单的文件上传功能
  • 511
分享到

nodejs如何实现简单的文件上传功能

2023-06-29 08:06:21 511人浏览 泡泡鱼
摘要

这篇文章主要为大家展示了“nodejs如何实现简单的文件上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“nodejs如何实现简单的文件上传功能”这篇文章吧。首先需要大家看一下目录结构,然后

这篇文章主要为大家展示了“nodejs如何实现简单的文件上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“nodejs如何实现简单的文件上传功能”这篇文章吧。

nodejs如何实现简单的文件上传功能

首先需要大家看一下目录结构,然后开始一点开始我们的小demo。

文件上传总计分为三种方式:

通过flash,activeX等第三方插件实现文件上传功能。

通过html的fORM标签实现文件上传功能,优点:浏览器兼容好。

通过xhr level2的异步请求,可以百度formData对象。

这里使用2做个练习。

node插件请看下package.JSON文件

{  "name": "upload",  "version": "0.1.0",  "description": "upload demo",  "main": "app.js",  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "author": "iwang",  "license": "ISC",  "dependencies": {    "body-parser": "^1.15.2",    "connect-multiparty": "^2.0.0",    "express": "^4.14.0"  }}

  dependencies中就是这次demo的依赖插件。我用的node.js是4.4.4版本的,大家可以把上面代码替换到你的package.json文件中,执行npm install 可以自动安装demo需要的三个依赖插件。

app.js

//express使用的是@4版本的。var express = require('express');//form表单需要的中间件。var mutipart= require('connect-multiparty');var mutipartMiddeware = mutipart();var app = express();//下面会修改临时文件的储存位置,如过没有会默认储存别的地方,这里不在详细描述,这个修改临时文件储存的位置 我在百度里查找了三四个小时才找到这个方法,不得不说nodejs真难学。//所以在这里留下我的学习记录,以备以后翻阅。app.use(mutipart({uploadDir:'./linshi'}));//设置Http服务监听的端口号。app.set('port',process.env.PORT || 3000);app.listen(app.get('port'),function () {    console.log("Express started on http://localhost:"+app.get('port')+'; press Ctrl-C to terminate.');});//浏览器访问localhost会输出一个html文件app.get('/',function (req,res) {    res.type('text/html');    res.sendfile('public/index.html')//这里用来玩,express框架路由功能写的,与上传文件没没有关系。app.get('/about',function (req,res) {    res.type('text/plain');    res.send('Travel about');//这里就是接受form表单请求的接口路径,请求方式为post。app.post('/upload',mutipartMiddeware,function (req,res) {    //这里打印可以看到接收到文件的信息。    console.log(req.files);        //给浏览器返回一个成功提示。    res.send('upload success!');

public/index.js

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body>    <form action="/upload" enctype="multipart/form-data" method="post">        <p>附件:<input type="file" name="myfile" ></p>        <p>            <input type="submit">        </p>    </form></body></html>

浏览器地址访问index.html

nodejs如何实现简单的文件上传功能

选取文件:我选择了一个timg.jpg的文件

nodejs如何实现简单的文件上传功能

点击提交后跳转了页面,提示成功上传

nodejs如何实现简单的文件上传功能

我们看一下,linshi名字的问价加下是否已经存在我们上传的文件,下面的图证明文件已经储存在了upload_demo/linshi下面,图片名字被改成了一个临时命名。

我们可以在app.js中写代码处理我们的图片文件了。

nodejs如何实现简单的文件上传功能

demo要点:

首先安装好nodejs 我这里的版本为4.4.4。

创建一个英文命名的文件。手动,或使用npm init创建一个package.json文件。把上述package.json的文件内容替换掉你创建的package.json文件内容。

使用npm install 安装package.json中的插件。自动生成了node_modules文件。我们的依赖插件都放在了这里。

编写好我们的app.js index.html文件。或者复制上述两处代码。

命令行执行node app.js。

浏览器访问localhost:3000,即可出现我们的简单的上传页面了。

以上是“nodejs如何实现简单的文件上传功能”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网精选频道!

--结束END--

本文标题: nodejs如何实现简单的文件上传功能

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

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

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

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

下载Word文档
猜你喜欢
  • nodejs如何实现简单的文件上传功能
    这篇文章主要为大家展示了“nodejs如何实现简单的文件上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“nodejs如何实现简单的文件上传功能”这篇文章吧。首先需要大家看一下目录结构,然后...
    99+
    2023-06-29
  • 简单实现nodejs上传功能
    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 npm install formidable var formidable = require('formidabl...
    99+
    2022-06-04
    上传 简单 功能
  • nodejs 实现简单的文件上传功能(示例详解)
    首先需要大家看一下目录结构,然后开始一点开始我们的小demo。 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能。 2.通过html的fo...
    99+
    2022-11-13
  • Servlet实现简单文件上传功能
    本文实例为大家分享了Servlet文件上传的具体代码,供大家参考,具体内容如下两点要素: 表单提交方式必须是post 2.enctype一定要是multipart/form-data。 enctype的默认值是application/x-w...
    99+
    2023-05-30
    servlet 文件上传 实现简单
  • JavaWeb实现简单上传文件功能
    本文实例为大家分享了JavaWeb实现上传文件功能的具体代码,供大家参考,具体内容如下 基本思想:网站服务器的内部除了有Web应用,还有文件系统,客户端向网站上传文件就是将文件以流的...
    99+
    2022-11-13
  • JavaWeb实现简单文件上传功能
    本文实例为大家分享了JavaWeb实现简单文件上传的具体代码,供大家参考,具体内容如下 1.概述 通常浏览器上传的所有参数,我们可以通过request对象的getParameter ...
    99+
    2022-11-13
  • Spring Boot简单实现文件上传功能
    目录前言后端处理物理路径和虚拟路径映射前言 前端处理 通过form表单来上传文件提交方式为postenctype格式为"multipart/form-data"i...
    99+
    2022-11-13
  • JavaWeb怎么实现简单上传文件功能
    这篇文章主要介绍了JavaWeb怎么实现简单上传文件功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaWeb怎么实现简单上传文件功能文章都会有所收获,下面我们一起来看看吧。基本思想:网站服务器的内部除了...
    99+
    2023-07-02
  • JavaWeb怎么实现简单文件上传功能
    这篇文章主要讲解了“JavaWeb怎么实现简单文件上传功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaWeb怎么实现简单文件上传功能”吧!1.概述通常浏览器上传的所有参数,我们可以...
    99+
    2023-07-02
  • 如何实现nodejs上传功能
    这篇文章给大家分享的是有关如何实现nodejs上传功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体内容如下npm install formidablevar fo...
    99+
    2022-10-19
  • element-ui el-upload实现上传文件及简单的上传文件格式验证功能
    在后台管理系统中总是会用到上传文件的功能, 想实现的样式如下:(实现上传文件后,在input输入框显示文件名 ) 结构代码如下: <el-form-item label="...
    99+
    2022-11-16
    文件上传elementUI中upload el-upload上传图片 element ui 上传
  • JavaWeb 文件的上传和下载功能简单实现代码
    一、文件的上传和下载1、文件上传的原理分析     1、文件上传的必要前提:          a、提供for...
    99+
    2023-05-31
    java web 文件上传
  • java如何实现单文件与多文件上传功能
    小编给大家分享一下java如何实现单文件与多文件上传功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!java 文件上传(单文件与多文件)一、简述一个javaWe...
    99+
    2023-05-30
    java
  • SpringBoot如何实现单文件与多文件上传功能
    这篇文章将为大家详细讲解有关SpringBoot如何实现单文件与多文件上传功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1.单文件上传首先创建一个Spring Boot项目,并添加spring-boo...
    99+
    2023-06-26
  • 简单实现Android文件上传
    文件上传在B/S应用中是一种十分常见的功能,那么在Android平台下是否可以实现像B/S那样的文件上传功能呢?答案是肯定的。下面是一个模拟网站程序上传文件的例子。 首先新...
    99+
    2022-06-06
    Android
  • SpringBoot简单实现文件上传
    目录1.创建SpringBoot项目2.修改application.properties配置文件3.编写控制器UserController类4.编写前端页面index.html5.效...
    99+
    2022-11-13
  • javaWeb实现简单文件上传
    本文实例为大家分享了javaWeb实现简单文件上传的具体代码,供大家参考,具体内容如下 1.先导入两个包:commons-fileupload-1.3.3.jar,commons-i...
    99+
    2022-11-13
  • 基于nodejs+express(4.x+)实现文件上传功能
    Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新。基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术。在Expres...
    99+
    2022-06-04
    文件上传 功能 nodejs
  • 如何使用MySQL和Java实现一个简单的文件上传功能
    要使用MySQL和Java实现一个简单的文件上传功能,可以按照以下步骤进行:1. 创建一个MySQL数据库表来存储上传的文件信息。表...
    99+
    2023-10-20
    MySQL
  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解
    目录Reactjs + Nodejs + Mongodb 实现文件上传概述React + Node.js + Mongodb「上传文件」前后端项目结构前端项目结构Reactjs 前端...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作