最近自学了一下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使用formidable实现文件上传的更多相关文章

  1. NodeJS+formidable实现文件上传加自动重命名

    前述 本人node初学者,此前使用原生node实现文件上传时遇到了一些困难,只做到了.txt 和.png两中格式的文件可以正常上传,如果上传其他格式文件服务端保存的文件会无法正常打开,原因是对form ...

  2. nodejs 实现简单的文件上传功能

    首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传 ...

  3. NodeJs 使用 multer 实现文件上传

    Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件 注意: Multer 不会处理任何非 multipart/form- ...

  4. 在 Node 中使用 formidable 处理文件上传

    具体使用方式参照官方文档:https://www.npmjs.com/package/formidable 第一:安装: # npm install --save formidable yarn ad ...

  5. nodejs使用multiparty模块实现文件上传(另附express.bodyParser()的说明)

    最近师弟师妹们在用formidable做文件上传的时候会出现form.parse()不会触发的问题,在stackoverflow也没有找到答案,反而是几个答案推荐使用multiparty来代替,因为那 ...

  6. javascript结合nodejs实现多文件上传

    前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口. 因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过no ...

  7. Nodejs进阶:基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  8. node express formidable 文件上传后修改文件名

    //我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = requi ...

  9. 【转】NodeJS教程--基于ExpressJS框架的文件上传

    本文是翻译的一篇文章,原文地址:Handle File Uploads in Express (Node.js). 在NodeJS发展早期上传文件是一个较难操作的功能,随后出现了formidable. ...

随机推荐

  1. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  2. 让我们山寨一张Windows Azure Global的壁纸

    用过国际版Azure的同学都见过一个显示了机器中主要信息的壁纸,而这个壁纸是通过Sysinternals的一款叫做bginfo来实现的,这款软件的好处是对于批量管理主(虚拟)机的管理员和使用方都很实用 ...

  3. RAC 某节点不可用时,对应VIP是否可用

    实验环境:RHEL 6.5 + GI 11.2.0.4 + Oracle 11.2.0.4 验证:RAC 某节点不可用时,其对应VIP是否可用?是否可用于连接数据库? [grid@jyrac2 ~]$ ...

  4. The Road To Hadoop(网盘系统的实现)

    因为毕业设计的原因,得从零开始学习hadoop.虽然接触Hadoop也有一段时间了,但是没有一个完整的时间段去学习,在公司实习的同时,只能利用零零碎碎的时间学习,今天完成了第一个版本的基于Hadoop ...

  5. go语言注释

    Go语言注释实例代码教程 - Go支持C语言风格的/* */块注释,也支持C++风格的//行注释. 当然,行注释更通用,块注释主要用于针对包的详细说明或者屏蔽大块的代码. 每个包都应有一个包注解,即 ...

  6. 生成随机id对比

    生成随机id 最近公司的项目游戏生成的随机不重复id,重复概率有点大, 代码如下: private static int id = 0; public static int serverID = 0; ...

  7. jQuery操作DOM元素

    作为一个后端程序员,也是要和前端页面打交道的.最常见的场景莫过DOM元素操作和前端页面使用AJAX向服务器发送请求.实现上述两个功能当然可以使用原生js来完成,但在实际开发过程中很少这样做,通常会使用 ...

  8. Entity Framework实现多列排序

    aList.OrderBy(a => a.WIndex).ThenBy(a=>a.KIndex) 类似sql:order by WIndex,KIndex

  9. 使用java泛型设计通用方法

    泛型是Java SE 1.5的新特性, 泛型的本质是参数化类型, 也就是说所操作的数据类型被指定为一个参数. 因此我们可以利用泛型和反射来设计一些通用方法. 现在有2张表, 一张user表和一张stu ...

  10. openresty 前端开发序

    还记得第一次尝试前后端分离的时候,是使用nginx + react 构建的spa应用,后端是java,主要处理业务逻辑逻辑部分,返回json数据,在nginx里面配置好html + js纯静态文件,再 ...