使用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入门详解(多篇文章结合)
Mar 07 NodeJs
Nodejs中的this详解
Mar 26 NodeJs
nodejs redis 发布订阅机制封装实现方法及实例代码
Dec 15 NodeJs
nodejs的压缩文件模块archiver用法示例
Jan 18 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
nodejs前端自动化构建环境的搭建
Jul 26 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
nodejs的安装使用与npm的介绍
Sep 11 NodeJs
详解NodeJs项目 CentOs linux服务器线上部署
Sep 16 NodeJs
Nodejs实现图片上传、压缩预览、定时删除功能
Oct 25 NodeJs
nodejs实现UDP组播示例方法
Nov 04 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 trim 去除空字符的定义与语法介绍
2010/05/31 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
php版微信开发之接收消息,自动判断及回复相应消息的方法
2016/09/23 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
asp批量修改记录的代码
2008/06/25 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
利用python代码写的12306订票代码
2015/12/20 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
ipad上运行python的方法步骤
2019/10/12 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
python Zmail模块简介与使用示例
2020/12/19 Python
意大利团购网站:Groupon意大利
2016/10/11 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
社区优秀志愿者材料
2014/02/02 职场文书
校庆接待方案
2014/03/18 职场文书
购房协议书范本
2014/04/11 职场文书
党风廉设责任书
2014/04/16 职场文书
10的分与合教学反思
2014/04/30 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
班主任寄语2016
2015/12/04 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
ObjectMapper 如何忽略字段大小写
2021/06/29 Java/Android
css3中transform属性实现的4种功能
2021/08/07 HTML / CSS