最近自学了一下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. 软件工程里的UML序列图的概念和总结

    俗话说,自己写的代码,6个月后也是别人的代码……复习!复习!复习! 软件工程的一般开发过程:愿景分析.业务建模,需求分析,健壮性设计,关键设计,最终设计,实现…… 时序图也叫序列图(交互图),属于软件 ...

  2. Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)

    <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(上)> <Oracle简单常用的数据泵导出导入(expdp/impdp)命令举例(下)> 目的:指导项 ...

  3. Python基础(一)

    本章内容: Python 的种类 Python 的环境 Python 入门(解释器.编码.pyc文件.脚步传入参数.变量.输入.流程控制与缩进.while循环) 练习题 Python 的种类 Cpyt ...

  4. C#[Win32&WinCE&WM]应用程序只能运行一个实例:MutexHelper

    前言 在开发应用程序时,通常只让程序运行一个实例.所以,就要判断程序是否已经运行. 下面是我自己在项目中使用到,封装好的帮助类.有 普通的 C# 应用程序 和 Windows CE 和 Windows ...

  5. Ionic2系列——使用DeepLinker实现指定页面URL

    Ionic2使用了近似原生App的页面导航方式,并不支持Angular2的路由.这种方式在开发本地App的时候比较方便,但如果要用来开发纯Web页面就有点问题了,这种情况下Angular2的route ...

  6. Gate Of Babylon bzoj 1272

    Gate Of Babylon (1s 128MB) babylon [问题描述] [输入格式] [输出格式] [样例输入] 2 1 10 13 3 [样例输出] 12 [样例说明] [数据范围] 题 ...

  7. 保持Qt GUI响应的几种方法

    最开始使用Qt时就遇到过QT Gui失去响应的问题,我是用多线程的方式解决的,然而通常来说,多线程是会降低程序的运行速度. 之后,在使用QSqlQuery::execBatch()函数时,Qt Gui ...

  8. 如果把带有html的标记的字符串从服务端传到页面上,需要对其进行编码。Ajax.JavaScriptStringEncode()

    controller: StringBuilder s = new StringBuilder(); string a = "<script>alert('我StringBuil ...

  9. SharePoint 2013 Designer 入门教程

    SharePoint的使用中,SharePoint Designer是非常重要的工具,我们可以通过Designer设计页面.母版页,维护.管理站点,也可以定制列表表单.数据视图,设计工作流等等.下面总 ...

  10. 在 ASP.NET CORE 中使用 SESSION

    Session 是保存用户和 Web 应用的会话状态的一种方法,ASP.NET Core 提供了一个用于管理会话状态的中间件.在本文中我将会简单介绍一下 ASP.NET Core 中的 Session ...