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


Posted in NodeJs onDecember 27, 2017

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.html中文件如下( form文件的类型必须为 enctype="multipart/form-data" ),

<form action="/upload" method="post" enctype="multipart/form-data">
 <input name="fileUpload" type="file" />
 <img src="" alt="">
 <button type="submit">上传</button>
</form>

在routes/index.js里面添加upload路由用来处理上传文件的操作

router.post('/upload', upload.single('fileUpload'), function (req, res, next) {
 const { file } = req;
 fs.readFile(file.path, function(err, data) {
 fs.writeFile(`${UPLOAD_PATH}/${file.originalname}`, data, function (err) {
  if (err) res.json({ err })
  res.json({
  msg: '上传成功'
  });
 });
 })
})

如果上传的文件是图片的话,还可以使用FileReader对象实现图片预览

(function($){
 $('input').on('change', function(event) {
 var files = event.target.files,
  reader = new FileReader();
 if(files && files[0]){
  reader.onload = function (ev) {
   $('img').attr('src', ev.target.result);
  }
  reader.readAsDataURL(files[0]);
 }
 })
}(jQuery))

多文件上传: 多文件上传的原理和单文件上传的原理一样,代码如下:

router.post('/upload', upload.array('fileUpload'), function (req, res, next) {
 const files = req.files;
 const response = [];
 const result = new Promise((resolve, reject) => {
 files.map((v) => {
  fs.readFile(v.path, function(err, data) {
  fs.writeFile(`${UPLOAD_PATH}/${v.originalname}`, data, function(err, data) {
   const result = {
   file: v,
   }
   if (err) reject(err);
   resolve('成功');
  })
  })
 })
 })
 result.then(r => {
 res.json({
  msg: '上传成功',
 })
 }).catch(err => {
 res.json({ err })
 });
})

相关代码在 github.com/bWhirring/n…

总结

以上所述是小编给大家介绍的使用nodejs+express实现简单的文件上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

NodeJs 相关文章推荐
跟我学Nodejs(三)--- Node.js模块
May 25 NodeJs
NodeJS使用jQuery选择器操作DOM
Feb 13 NodeJs
Nodejs下用submit提交表单提示cannot post错误的解决方法
Nov 21 NodeJs
nodejs进阶(6)—连接MySQL数据库示例
Jan 07 NodeJs
NodeJS实现图片上传代码(Express)
Jun 30 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
Nodejs中使用phantom将html转为pdf或图片格式的方法
Sep 18 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 NodeJs
详解Nodejs mongoose
Jun 10 NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
Nov 30 NodeJs
基于nodejs的微信JS-SDK简单应用实现
May 21 NodeJs
nodejs超出最大的调用栈错误问题
Dec 27 #NodeJs
nodejs实现简单的gulp打包
Dec 21 #NodeJs
nodejs调取微信收货地址的方法
Dec 20 #NodeJs
基于nodejs实现微信支付功能
Dec 20 #NodeJs
nodeJS微信分享
Dec 20 #NodeJs
NodeJS爬虫实例之糗事百科
Dec 14 #NodeJs
nodejs实现爬取网站图片功能
Dec 14 #NodeJs
You might like
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php实现有趣的人品测试程序实例
2015/06/08 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
DOM 高级编程
2015/05/06 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
浅谈Javascript数组(推荐)
2016/05/17 Javascript
jQuery为动态生成的select元素添加事件的方法
2016/08/29 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
微信小程序本地存储实现每日签到、连续签到功能
2019/10/09 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python+PyQT实现系统桌面时钟
2020/06/16 Python
python 遍历列表提取下标和值的实例
2018/12/25 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
Python 求向量的余弦值操作
2021/03/04 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
美国汽配连锁巨头Pep Boys官网:轮胎更换、汽车维修服务和汽车零部件
2017/01/14 全球购物
英国领先的品牌珠宝和配件供应商:Acotis Jewellery
2018/03/07 全球购物
车贷收入证明范本
2014/01/09 职场文书
物业保安员岗位职责
2014/03/14 职场文书
爱心捐款倡议书
2014/04/14 职场文书
意向协议书
2015/01/27 职场文书
高中教师个人总结
2015/02/10 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
于丹讲座视频观后感
2015/06/15 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS
Redis性能监控的实现
2021/07/09 Redis