nodejs 实现简单的文件上传功能(示例详解)

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

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

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

2.通过html的form标签实现文件上传功能，优点：浏览器兼容好。

3.通过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

/**
 * Created by iwang on 2017/1/15.
 */
//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);
    /*//do something
    * 成功接受到浏览器传来的文件。我们可以在这里写对文件的一系列操作。例如重命名，修改文件储存路径 。等等。
    *
    * */
    //给浏览器返回一个成功提示。
    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" style=""></p>
        <p>
            <input type="submit">
        </p>
    </form>
</body>
</html>

浏览器地址访问index.html

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

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

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

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

demo要点：

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

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

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

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

5.命令行执行node app.js。

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

到此这篇关于nodejs 实现简单的文件上传功能的文章就介绍到这了,更多相关nodejs 文件上传内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用nodejs+express实现简单的文件上传功能

    1.建立express项目 express -e nodejs-uploadfile 2.下载multer中间件 npm i multer or yarn multer 3.在routes/index.js中引用multer,由于还要使用到文件操作,还要引用fs模块,并指定文件上传目录 const multer = require('multer'); const fs = require('fs'); const UPLOAD_PATH = './uploads' 单文件上传: index.h

  • Nodejs实现文件上传的示例代码

    笔者用nodejs做项目时需要用到文件上传的功能,在网上搜索了很多教程,找到了一个express的中间件,用于处理 multipart/form-data 类型的表单数据,可以很方便的将表单中的文件数据保存到服务器. 介绍 简单的用法 定义存储器 Multer作为express的一个中间件,我们可以很方便的自定义上传的文件目录以及保存的文件名.先看一个最简单的用法, demo1地址 : var express = require('express'); var multer = require(

  • nodejs multer实现文件上传与下载

    本文实例为大家分享了nodejs实现文件上传下载的具体代码,供大家参考,具体内容如下 1.介绍 做了一个关于文件上传和下载的demo ,选择了Multer 作为中间件进行数据处理. 关于multer请参考中文翻译文档 https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md 或者官方文档 2. upload 文件上传 html form标签内设置enctype="multipart/form-data"是必须

  • Nodejs文件上传、监听上传进度的代码

    前言 文件上传如果加上进度条会有更好的用户体验(尤其是中大型文件),本文使用 Nodejs 配合前端完成这个功能. 前端我们使用 FormData 来作为载体发送数据. 效果 前端部分 HTML 部分 和 Js 部分 <input type="file" id="file" /> <!-- 进度条 --> <progress id="progress" value="0" max="10

  • nodejs基于express实现文件上传的方法

    本文实例讲述了nodejs基于express实现文件上传的方法.分享给大家供大家参考,具体如下: 前段时间在做个人项目的时候,用到了nodejs服务端上传文件,现在回头把这个小结一下,作为记录. 本人上传文件时是基于express的multiparty ,当然也可以使用connect-multiparty中间件实现,但官方似乎不推荐使用connect-multiparty中间件.废话不多说,下面看代码吧. 步骤: (1)使用express创建项目,默认使用的是jade模板引擎,但是还是习惯于ht

  • nodejs 实现简单的文件上传功能(示例详解)

    nodejs 实现简单的文件上传功能(示例详解)

    首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传功能,优点:浏览器兼容好. 3.通过xhr level2的异步请求,可以百度formData对象. 这里使用2做个练习. node插件请看下package.json文件 { "name": "upload", "version": "0.1

  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    目录 Reactjs + Nodejs + Mongodb 实现文件上传 概述 React + Node.js + Mongodb「上传文件」前后端项目结构 前端项目结构 Reactjs 前端部分 后端项目结构 后端项目结构 前端部分-上传文件 React + Axios 配置 React 环境 导入 bootstrap 到项目中 初始化 Axios 创建上传文件组件 创建 React 文件上传组件 将文件上传组件添加到App组件 上传文件配置端口 项目运行 后端部分 配置 Node.js 开发

  • JavaWeb Struts文件上传功能实现详解

    JavaWeb Struts文件上传功能实现详解

    一.Struts文件上传的思路 之前也讲过了FileUpload这个组件,功能很强大,但是操作繁琐复杂.这次,在Strust中也对文件上传有所支持,并FileUpload进行了包装,用起来方便了许多. 这里涉及到了一个标签和一个类: <html:file property="对应ActionForm中的属性名称"> 用这个标签可以上传文件,但是要接收次内容必须依靠org.apache.struts.upload.FormFile 接口完成. 二.实现 sh.jsp: <

  • java 网络编程之TCP通信和简单的文件上传功能实例

    TCP通信需要明确的几点: tcp通信是面向连接的,需要先启动服务端,再启动客户端. 客户端和服务端都要创建套接字对象,客户端需要指定服务端套接字(ip+port),而服务端必须指定服务端口. Socket client_socket = new Socket("192.168.100.17",8888); //客户端套接字(Socket类的套接字为已连接套接字) ServerSocket listen_socket = new ServerSocket(8888); //服务端套接字

  • Java实现一个简单的文件上传案例示例代码

    Java实现一个简单的文件上传案例 实现流程: 1.客户端从硬盘读取文件数据到程序中 2.客户端输出流,写出文件到服务端 3.服务端输出流,读取文件数据到服务端中 4.输出流,写出文件数据到服务器硬盘中 下面上代码 上传单个文件 服务器端 package FileUpload; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.net.Serve

  • 最详细的文件上传下载实例详解(推荐)

    最详细的文件上传下载实例详解(推荐)

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru

  • SpringBoot整合MinIO实现文件上传的方法详解

    SpringBoot整合MinIO实现文件上传的方法详解

    目录 前言 1. MinIO 简介 2. MinIO 安装 3. 整合 Spring Boot 4. 配置nginx 5. 小结 前言 现在 OSS 服务算是一个基础服务了,很多云服务厂商都有提供这样的服务,价格也不贵,松哥自己的网站用的就是类似的服务. 不过对于中小公司来说,除了购买 OSS 服务之外,也可以自己搭建专业的文件服务器,自己搭建专门的文件服务器的话,曾经比较专业的做法是 FastDFS,松哥之前也专门为之录过视频发在 B 站上,感兴趣的小伙伴可以自行查看.不过 FastDFS 搭

  • Bootstrap+PHP实现多图上传功能实例详解

    使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异步或同步上传,下面是效果图: 前端代码:fileinput.html <!DOCTYPE html> <!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8"/> <ti

  • Spring实现文件上传的配置详解

    Spring实现文件上传的配置详解

    添加依赖 主要用来解析request请求流,获取文件字段名.上传文件名.content-type.headers等内容组装成FileItem <!--添加fileupload依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</versio

  • Bootstrap Fileinput文件上传组件用法详解

    Bootstrap Fileinput文件上传组件用法详解

    最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot

随机推荐