Node.js实现文件上传的示例

文件上传指的是将用户本地的文件上传到服务器中。

上传文件需要处理两个位置：

客户端

  1. 客户端如何上传文件？
  2. 上传文件的表单项需要指定为input，type是file
  3. 要上传文件必须将表单enctype设置为multipart/form-data 这个参数表示表单将会以多部件表单的形式上传enctype=”application/x-www-form-urlencoded”是默认值。这个值的意思指将会对表单项的内容进行url编码，所谓url编码就将请求参数转换为二进制编码。

1、multipart/form-data body-parser 无法解析， multer 模块专门用来帮助我们解析多部件的请求体。

<body>

<h2>文件上传（file upload）</h2>
<form action="/testUpload" method="post" enctype="multipart/form-data" id="form">
  <pre>
    Hi sir <input type="text" name="username"/>

    upupup <input type="file" name="photo"/>

              <input type="submit" value="提交" id ="btn" style="width:100px;background-color: #99ff99" >
  </pre>
</form>
// 利用AJAX 上传文件
<script>

  var btn = document.getElementById("btn");
 btn.onclick = function () {

    //FormData 这个对象可以用来对表单中的数据进行封装
    //使用FormData来对表单中的数据进行包装
    var fd = new FormData(document.getElementById("form"));

    //创建一个xhr对象
    var xhr = new XMLHttpRequest();

    //设置请求的地址
    xhr.open("post" , "/testUpload");

    //发送请求
    xhr.send(fd);

    //接收响应
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4 && xhr.status == 200){
        alert(xhr.responseText);
      }
    };

    //取消默认行为
    return false;
  };

</script>
</body>

2. 服务器端

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const multer = require("multer");
app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser.json());
app.use(express.static("public"));
const storage = multer.diskStorage({
  //destination 用来设置上传文件的路径 可以接收一个回调函数， 或者一个字符串
  //如果传递一个回调函数的话，则需要确保路径有效
  destination: 'uploads/',

  //filename 属性可以用来指定文件上传以后保存到服务器中的名字
  filename: function (req, file, cb) {
    //cb(null, file.fieldname + '-' + Date.now())
    //获取文件的扩展名
    //Chrysanthemum.jpg
    let fname = file.originalname;
    let extName = "";
    //判断文件是否具有扩展名
    if(fname.lastIndexOf(".") != -1){
      extName = fname.slice(fname.lastIndexOf("."));
    }

    //上传文件时，一般不会直接将用户的文件名直接保存的服务器中
    //一般会随机生成一个文件名
    cb(null, file.fieldname + '-' + Date.now()+extName);
  }
})
const upload = multer(
  {
    storage: storage,
    limits:{
     //限制文件的大小为200kb
     fileSize:1024*200
     }
  });
app.post("/testUpload" , (req , res)=>{
  //获取解析请求体的函数
  let fu = upload.single('photo');
  //手动调用函数来解析请求体
  fu(req , res , (err)=>{
    if(err){
      //证明上传出错了，文件大小超标
      res.send("文件太大了，请上传200kb以下的文件！！");
    }else{
      //读取请求参数
      let username = req.body.username;
      res.send("上传成功~~~");
    }
  });
});
app.listen(3333,()=>{
  console.log("success");
});

文件夹示例

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 基于nodejs+express(4.x+)实现文件上传功能

    Nodejs是一个年轻的编程框架,充满了活力和无限激情,一直都在保持着快速更新.基于Nodejs的官方Web开发库Express也在同步发展着,每年升级一个大版本,甚至对框架底层都做了大手术.在Express4时,替换掉中件间库connect,而改用多个更细粒度的库来取代.带来的好处是明显地,这些中间件能更自由的更新和发布,不会受到Express发布周期的影响:但问题也是很的棘手,不兼容于之前的版本,升级就意味着要修改代码. 通过一段时间的查阅资料.摸索,我发现实现上传的方式有:1.expres

  • Nodejs进阶：基于express+multer的文件上传实例

    概览 图片上传是web开发中经常用到的功能,node社区在这方面也有了相对完善的支持. 常用的开源组件有multer.formidable等,借助这两个开源组件,可以轻松搞定图片上传. 本文主要讲解以下内容,后续章节会对技术实现细节进行深入挖掘. 基础例子:借助express.multer实现单图.多图上传. 常用API:获取上传的图片的信息. 进阶使用:自定义保存的图片路径.名称. 环境初始化 非常简单,一行命令. npm install express multer multer --sav

  • NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能.该小demo用到了MySQL数据库,所有的数据都存放到了数据库中.下面简单说一些如何使用. 1.创建app.js主文件 const express = require('express'); const router = require('./router'); const pat

  • 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+express实现文件上传下载管理网站

    nodejs+express实现文件上传下载管理网站

    nodejs+express-实现文件上传下载管理的网站 项目Github地址:https://github.com/qcer/updo 后端:基于nodejs的express的web框架. 前端:bootstrap框架+vuejs.jquery等js库 功能点: dronzone.js实现文件拖拽上传.下载,可自定义传输容量. vuejs实现表格双向数据绑定. jquery.form.min.js表单插件,升级表单,实现表单提交回调. 纯css+jQuery实现一键返回顶部. 简单的ajax异

  • NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

    NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法

    实现多文件拖拽上传的简易Node项目,可以在github上下载,你可以先下载下来:https://github.com/Johnharvy/upLoadFiles/. 解开下载下的zip格式包,建议用webstom 运行该项目,通过app.js启动项目,如果提示找不到node.exe执行环境,请指定好你的node.exe安装位置.这里我用的express框架是3.21.2版本. 我们来简单介绍下拖拽效果是怎么实现的. 这里先看代码: <!DOCTYPE html> <html lang=

  • Node.js实现文件上传的示例

    Node.js实现文件上传的示例

    文件上传指的是将用户本地的文件上传到服务器中. 上传文件需要处理两个位置: 客户端 客户端如何上传文件? 上传文件的表单项需要指定为input,type是file 要上传文件必须将表单enctype设置为multipart/form-data 这个参数表示表单将会以多部件表单的形式上传enctype="application/x-www-form-urlencoded"是默认值.这个值的意思指将会对表单项的内容进行url编码,所谓url编码就将请求参数转换为二进制编码. 1.multi

  • Node.js实现文件上传

    在工作中碰到了这样的需求,需要用nodejs 来上传文件,之前也只是知道怎么通过浏览器来上传文件, 用nodejs的话, 相当于模拟浏览器的行为. google 了一番之后, 明白了浏览器无非就是利用http协议来给服务器传输数据, 具体协议就是<RFC 1867 - Form-based File Upload in HTML>, 在浏览器上通过form 表单来上传文件就是通过这个协议,我们可以先看看浏览器给服务端发送了什么数据, 就可以依葫芦画瓢的把上传功能实现出来.说起form 表单上传

  • 又拍云 Node.js 实现文件上传、删除功能

    Node.js 服务端 使用 Node.js + Express.js 实现 服务端 const express = require("express"); const app = express(); const axios = require('axios'); app.set('port', process.env.PORT || 8082); // 静态资源目录,这里放在了根目录,生产环境不允许这样 app.use(express.static(__dirname)); //

  • Node.js实现分片上传断点续传示例详解

    目录 正文 文件的分片与合并 并发控制 使代码可复用 服务端接口实现 正文 大文件上传会消耗大量的时间,而且中途有可能上传失败.这时我们需要前端和后端配合来解决这个问题. 解决步骤: 文件分片,减少每次请求消耗的时间,如果某次请求失败可以单独上传,而不是从头开始 通知服务端合并文件分片 控制并发的请求数量,避免浏览器内存溢出 当因为网络或者其他原因导致某次的请求失败,我们重新发送请求 文件的分片与合并 在JavaScript中,FIle对象是' Blob '对象的子类,该对象包含一个重要的方法s

  • React+react-dropzone+node.js实现图片上传的示例代码

    React+react-dropzone+node.js实现图片上传的示例代码

    本文将会用typescript+react+react-dropzone+express.js实现前后端上传图片.当然是用typescript需要提前下载相应的模块,在这里就不依依介绍了. 第一步,配置tsconfig.js "compilerOptions": { "outDir": "./public/", "sourceMap": true, "noImplicitAny": true, "

  • Node.js + express实现上传大文件的方法分析【图片、文本文件】

    Node.js + express实现上传大文件的方法分析【图片、文本文件】

    本文实例讲述了Node.js + express实现上传大文件的方法.分享给大家供大家参考,具体如下: 对于大文件的上传我们首先要引入一个叫做 multer 的库: npm install --save multer 关于这个库,大家可以查阅官方文档: 点击跳转 https://www.npmjs.com/package/multer 我们先将库引入我们的项目中: var multer = require('multer') var upload = multer({ dest: 'upload

  • 详解Node.js一行命令上传本地文件到服务器

    详解Node.js一行命令上传本地文件到服务器

    现在存在的问题 每次打包完, 都要打开 FileZilla 一顿拖拽然后才能上传代码, 那就立马撸一个自动化脚本就完事了 publish-sftp Github 传送门(顺便来骗个Star) 以后一行命令上传本地文件到服务器啦 publish-sftp -c // 完事 安全性 项目组已经跑了大半年, 没出过幺蛾子, 可放心使用 实现 基于 ssh2-sftp-client 快速上手 install sudo npm i publish-sftp -g sudo npm link publish

  • React+Koa实现文件上传的示例

    背景 最近在写毕设的时候,涉及到了一些文件上传的功能,其中包括了普通文件上传,大文件上传,断点续传等等 服务端依赖 koa(node.js框架) koa-router(Koa路由) koa-body(Koa body 解析中间件,可以用于解析post请求内容) koa-static-cache(Koa 静态资源中间件,用于处理静态资源请求) koa-bodyparser(解析 request.body 的内容) 后端配置跨域 app.use(async (ctx, next) => { ctx.

  • Vue+NodeJS实现大文件上传的示例代码

    Vue+NodeJS实现大文件上传的示例代码

    目录 整体思路 项目演示 前端界面 文件切片 hash计算 查询切片状态 切片上传(断点续传) 文件总体上传进度 合并文件 优化 请求并发数控制 hash值计算优化 常见的文件上传方式可能就是new一个FormData,把文件append进去以后post给后端就可以了.但如果采用这种方式来上传大文件就很容易产生上传超时的问题,而且一旦失败还得从新开始,在漫长的等待过程中用户还不能刷新浏览器,不然前功尽弃.因此这类问题一般都是通过切片上传. 整体思路 将文件切成多个小文件 hash计算,需要计算一

  • JS多文件上传的实例代码

    废话不多说了,具体实现代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./jquery-1.9.1.min.js"></script> </head> <body> <fo

随机推荐