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


Posted in Javascript onJune 28, 2017

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

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

客户端

  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");
});

文件夹示例

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 的应用开发初探(mootools)
Dec 19 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
详解Document.Cookie
Dec 25 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
jQuery代码实现实时获取时间
Jan 29 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 #Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 #Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 #Javascript
js+html制作简单日历的方法
Jun 27 #Javascript
ionic环境配置及问题详解
Jun 27 #Javascript
微信小程序 密码输入(源码下载)
Jun 27 #Javascript
Javascript实现base64的加密解密方法示例
Jun 27 #Javascript
You might like
PHP教程 预定义变量
2009/10/23 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
jquery pagination插件实现无刷新分页代码
2009/10/13 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Jquery Select操作方法集合脚本之家特别版
2010/05/17 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
jquery序列化form表单使用ajax提交后处理返回的json数据
2014/03/03 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
NodeJS基础API搭建服务器详细过程记录
2017/04/01 NodeJs
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
ElementUI中el-tree节点的操作的实现
2020/02/27 Javascript
react基本安装与测试示例
2020/04/27 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python3.5+tesseract+adb实现西瓜视频或头脑王者辅助答题
2018/01/17 Python
Python微信公众号开发平台
2018/01/25 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
中医专业职业生涯规划书范文
2014/01/04 职场文书
酒店副总经理岗位职责范本
2014/02/04 职场文书
学校元旦晚会方案
2014/02/19 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
MySQL慢查询的坑
2021/04/28 MySQL
java代码实现空间切割
2022/01/18 Java/Android