NodeJS使用formidable实现文件上传


Posted in NodeJs onOctober 27, 2016

最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加、修改、播放和删除的功能,其中自然要实现音乐和图片的上传功能。于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能。该小demo用到了MySQL数据库,所有的数据都存放到了数据库中。下面简单说一些如何使用。

1.创建app.js主文件

const express = require('express');
const router = require('./router');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

//静态资源服务
app.use('/uploads', express.static(path.join(__dirname, 'uploads')));
app.use('/node_modules', express.static(path.join(__dirname, 'node_modules')));

//配置模板引擎
app.set('views', path.join(__dirname, 'views'));
app.engine('.html', require('ejs').renderFile);
app.set('view engine', 'html');

//配置解析普通表单post请求体
app.use(bodyParser.urlencoded({extended:false}));

//加载路由系统
app.use(router);

app.listen(3000, '127.0.0.1', () => {
  console.log('server is running at port 3000.');
})

2.html文件中的form表单
add.html文件:

<form action="/add" method="post" enctype="multipart/form-data"> 
   <div class="form-group">
    <label for="title">标题</label>
    <input type="text" class="form-control" id="title" name="title" placeholder="请输入音乐标题">
   </div>
   <div class="form-group">
    <label for="artist">歌手</label>
    <input type="text" class="form-control" id="singer" name="singer" placeholder="请输入歌手名称">
   </div>
   <div class="form-group">
    <label for="music_file">音乐</label>
    <input type="file" id="music" name="music" accept="audio/*">
    <p class="help-block">请选择要上传的音乐文件.</p>
   </div>
   <div class="form-group">
    <label for="image_file">海报</label>
    <input type="file" id="poster" name="img" accept="image/*">
    <p class="help-block">请选择要上传的音乐海报.</p>
   </div>
   <button type="submit" class="btn btn-success">点击添加</button>
  </form>

注意:method="post" enctype="multipart/form-data"

3.创建路由router.js文件

const express = require('express');
const router = express.Router();
const handler = require('./handler');
 
router
  .get('/', handler.showIndex)
  .get('/musicList', handler.getMusicList)
  .get('/add', handler.showAdd)
  .post('/add', handler.doAdd)
  .get('/edit', handler.showEdit)
  .post('/edit', handler.doEdit)
  .get('/remove', handler.doRemove)
 
module.exports = router;

注意:router.js文件中的依赖不用多说。

4.创建handler.js文件

const formidable = require('formidable');
const config = require('./config');
const db = require('./common/db');
const path = require('path');
const fs = require('fs');
exports.doAdd = (req, res) => {
  const form = new formidable.IncomingForm();
  form.uploadDir = config.uploadDir;//上传文件的保存路径
  form.keepExtensions = true;//保存扩展名
  form.maxFieldsSize = 20 * 1024 * 1024;//上传文件的最大大小
  form.parse(req, (err, fields, files) => {
    if (err) {
      throw err;
    }
    const title = fields.title;
    const singer = fields.singer;
    const music = path.basename(files.music.path);
    const img = path.basename(files.img.path);
    db.query('INSERT INTO music (title,singer,music,img) VALUES (?,?,?,?)', [
      title,
      singer,
      music,
      img
    ], (err, rows) => {
      if (err) {
        throw err;
      }
      res.redirect('/');
    })
  })
};

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

NodeJs 相关文章推荐
nodejs批量修改文件编码格式
Jan 22 NodeJs
简单实现nodejs上传功能
Jan 14 NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 NodeJs
浅析 NodeJs 的几种文件路径
Jun 07 NodeJs
详解nodejs异步I/O和事件循环
Jun 07 NodeJs
nodejs使用express获取get和post传值及session验证的方法
Nov 09 NodeJs
nodejs高大上的部署方式(PM2)
Sep 11 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
Jan 04 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 NodeJs
详解利用nodejs对本地json文件进行增删改查
Sep 20 NodeJs
通过实例了解Nodejs模块系统及require机制
Jul 16 NodeJs
浅谈使用nodejs搭建web服务器的过程
Jul 20 NodeJs
nodejs简单实现操作arduino
Sep 25 #NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 #NodeJs
nodejs微信公众号支付开发
Sep 19 #NodeJs
nodeJs内存泄漏问题详解
Sep 05 #NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 #NodeJs
NodeJS远程代码执行
Aug 28 #NodeJs
用NodeJS实现批量查询地理位置的经纬度接口
Aug 16 #NodeJs
You might like
ADODB的数据库封包程序库
2006/12/31 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
Thinkphp结合ajaxFileUpload实现异步图片传输示例
2017/03/13 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JQuery选择器、过滤器大整理
2015/05/26 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
jQuery.deferred对象使用详解
2016/03/18 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
Vue基于NUXT的SSR详解
2017/10/24 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
python快速排序代码实例
2013/11/21 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
不假外出检讨书
2014/01/27 职场文书
销售经理工作职责
2014/02/03 职场文书
家长对老师的评语
2014/04/18 职场文书
高中班主任评语大全
2014/04/25 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
技术支持岗位职责
2015/02/13 职场文书
2015年教师节慰问信
2015/03/23 职场文书
超强台风观后感
2015/06/09 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫