node文件上传功能简易实现代码


Posted in Javascript onJune 16, 2017

找了不少文件上传的相关模块,最后选择了比较常用,并且是express推荐使用的 multer 来实现文件上传,附上 GitHub 地址

1. 开始

开始第一步,自然就是安装模块,不多说

npm install multer --save

这里简单说一下,因为文件上传是用 post 方法提交数据,所以上传的单文件或者多文件会作为一个 body 体添加到请求对象中,我们可以通过 req.file 或者 req.files 查看上传后文件的相关信息。

以单文件上传为例,req.file 返回一个对象:

{
   "fieldname":"avatar",  #前端上传文件input的name
   "originalname":"Wx.php",  #本地文件名
   "encoding":"7bit",  #文件编码类型
   "mimetype":"text/php",  #文件类型
   "destination":"uploads/",  #上传根目录
   "filename":"1497286037422Wx.php",  #上传后文件名
   "path":"uploads/1497286037422Wx.php",  #文件路径
   "size":18174  #文件大小
}

该对象的 key 值是固定的,velue 值根据配置生成,用于实现相关逻辑

2. 实现

实现分两部分,前端和后端

前端

前端就是普通的写法,form 表单提交

<form action="/test/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
  <input type="submit" name="提交">
</form>

切记,enctype="multipart/form-data" 这个属性一定要加上,否则后台接收不到文件。

后端

首先我们新建配置文件,upload.js

// upload.js

var multer = require('multer');  # 引入模块

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, Date.now()+file.originalname)
  }
})

var upload = multer({ storage: storage })

module.exports = upload;

diskStorage方法相当于创建一个磁盘存储引擎,配置文件上传路径,文件名等,可控性更高。

destination  # 设置文件上传路径
filename    # 重命名文件

然后新建路由接收文件,file.js

// file.js 

var express = require('express');
var router = express.Router();

// 引入配置文件
var upload = require('../config/upload');

router.post('/upload', upload.single('avatar'), function(req, res, next) {
  res.send(req.file);
});

module.exports = router;

file.js 中 upload.single() 方法表示接受单文件,常用的有

upload.single(fname);  // 接收单文件
upload.array(fname[, maxCount])  //接收多文件,maxCount表示接收最大数量

fname 是前端 <input type="file" name="fname"> 的 name 值

基本的上传文件方法就这些了,当然还有很多的配置参数之类的设置,要参考 GitHub 说明,地址在开头,需要者自行查阅

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

Javascript 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
详解vue-router和vue-cli以及组件之间的传值
Jul 04 Javascript
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
浅谈react-native热更新react-native-pushy集成遇到的问题
Sep 30 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
Jun 28 Javascript
详解webpack 多入口配置
Jun 16 #Javascript
requirejs + vue 项目搭建详解
Jun 16 #Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 #jQuery
jQuery序列化后的表单值转换成Json
Jun 16 #jQuery
详解探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用
Jun 16 #Javascript
基于AngularJS实现的工资计算器实例
Jun 16 #Javascript
Angular+Node生成随机数的方法
Jun 16 #Javascript
You might like
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php 数组随机取值的简单实例
2016/05/23 PHP
PHP中header用法小结
2016/05/23 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
实现非常简单的js双向数据绑定
2015/11/06 Javascript
SublimeText自带格式化代码功能之reindent
2015/12/27 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
vue项目中使用多选框的实例代码
2020/07/22 Javascript
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
详解Python进程间通信之命名管道
2017/08/28 Python
Python文件和流(实例讲解)
2017/09/12 Python
Python tkinter事件高级用法实例
2018/01/31 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Django密码存储策略分析
2020/01/09 Python
分享一个python的aes加密代码
2020/12/22 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
美国花布包包品牌:Vera Bradley
2017/08/11 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
办公室人员先进事迹
2014/01/27 职场文书
《学会合作》教学反思
2014/04/12 职场文书
化验室安全管理制度
2015/08/06 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL