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 相关文章推荐
jQuery 创建Dom元素
May 07 Javascript
各浏览器对link标签onload/onreadystatechange事件支持的差异分析
Apr 27 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
jquerydom对象的事件隐藏显示和对象数组示例
Dec 10 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
Bootstrap开关(switch)控件学习笔记分享
May 30 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
Sep 04 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
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 面向对象 final类与final方法
2010/05/05 PHP
php实现mysql封装类示例
2014/05/07 PHP
joomla数据库操作示例代码
2016/01/06 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
jquery.validate使用攻略 第二部
2010/07/01 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
2015/03/13 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
2015/03/18 Javascript
javascript淘宝主图放大镜功能
2016/10/20 Javascript
bootstrap模态框消失问题的解决方法
2016/12/02 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
jQuery实现基本淡入淡出效果的方法详解
2018/09/05 jQuery
vue弹出框组件封装实例代码
2019/10/31 Javascript
请求时token过期自动刷新token操作
2020/09/11 Javascript
python实现zencart产品数据导入到magento(python导入数据)
2014/04/03 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Python 如何在字符串中插入变量
2020/08/01 Python
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
95%的面试官都会问到的50道Java线程题,附答案
2012/08/03 面试题
优秀企业获奖感言
2014/02/01 职场文书
五年级音乐教学反思
2014/02/06 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
实习证明格式范文
2014/10/14 职场文书
湖南省召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript