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爬虫抓取数据之编码问题
Jul 03 NodeJs
Nodejs express框架一个工程中同时使用ejs模版和jade模版
Dec 28 NodeJs
你一定会收藏的Nodejs代码片段
Feb 04 NodeJs
nodejs个人博客开发第五步 分配数据
Apr 12 NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 NodeJs
使用Nodejs连接mongodb数据库的实现代码
Aug 21 NodeJs
Nodejs+express+ejs简单使用实例代码
Sep 18 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
原生nodejs使用websocket代码分享
Apr 07 NodeJs
NodeJS如何实现同步的方法示例
Aug 24 NodeJs
Nodejs实现多文件夹文件同步
Oct 17 NodeJs
用Electron写个带界面的nodejs爬虫的实现方法
Jan 29 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
php垃圾代码优化操作代码
2010/08/05 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
js如何取消事件冒泡
2013/09/23 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
快速将Vue项目升级到webpack3的方法步骤
2017/09/14 Javascript
vue基于mint-ui的城市选择3级联动的示例
2017/10/25 Javascript
微信小程序使用request网络请求操作实例
2017/12/15 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
详细讲解用Python发送SMTP邮件的教程
2015/04/29 Python
python numpy格式化打印的实例
2018/05/14 Python
Jupyter notebook快速入门教程(推荐)
2020/05/18 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
秋天的雨教学反思
2014/04/27 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年学生会工作总结范文
2014/11/07 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
2015年公路养护工作总结
2015/05/13 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
品德与社会教学反思
2016/02/24 职场文书
go web 预防跨站脚本的实现方式
2021/06/11 Golang
MySQL 开窗函数
2022/02/15 MySQL