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 相关文章推荐
windows系统下简单nodejs安装及环境配置
Jan 08 NodeJs
NodeJS Express框架中处理404页面一个方式
May 28 NodeJs
Nodejs Post请求报socket hang up错误的解决办法
Sep 25 NodeJs
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
Sep 26 NodeJs
PHP和NodeJs开发的应用如何共用Session
Apr 16 NodeJs
nodejs基础应用
Feb 03 NodeJs
解决nodejs中使用http请求返回值为html时乱码的问题
Feb 18 NodeJs
nodejs中安装ghost出错的原因及解决方法
Oct 23 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
5分钟教你用nodeJS手写一个mock数据服务器的方法
Sep 10 NodeJs
nodejs中内置模块fs,path常见的用法说明
Nov 07 NodeJs
Nodejs实现微信分账的示例代码
Jan 19 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企业级应用之常见缓存技术篇
2011/01/27 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php利用单例模式实现日志处理类库
2014/02/10 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
PHP学习笔记(一):基本语法之标记、空白、和注释
2015/04/17 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP asXML()函数讲解
2019/02/03 PHP
jQuery 使用手册(三)
2009/09/23 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
jQuery 幻灯片插件(带缩略图功能)
2011/01/24 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
利用python程序帮大家清理windows垃圾
2017/01/15 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
python保留小数位的三种实现方法
2020/01/07 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
IE9下html5初试小刀
2010/09/21 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
办公室文书岗位职责
2013/12/16 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
聘任书的格式及模板
2019/10/28 职场文书