NodeJS使用formidable实现文件上传

  最近自学了一下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(‘/‘);
        })
    })
};
时间: 2024-10-22 14:18:22

NodeJS使用formidable实现文件上传的相关文章

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

首先需要大家看一下目录结构,然后开始一点开始我们的小demo. 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能. 2.通过html的form标签实现文件上传功能,优点:浏览器兼容好. 3.通过xhr level2的异步请求,可以百度formData对象. 这里使用2做个练习. node插件请看下package.json文件 { "name": "upload", "version": "0.1

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

具体使用方式参照官方文档:https://www.npmjs.com/package/formidable 第一:安装: # npm install --save formidable yarn add formidable 第二:基本使用: var formidable = require('formidable'), http = require('http'), util = require('util'); http.createServer(function(req, res) { i

javascript结合nodejs实现多文件上传

前端文件上传功能比较依赖后端,所以第一步用nodejs实现一个供文件上传的功能接口. 因为本人对nodejs也是一知半解,所以刚开始的想法是像原始的ajax交互那样,获取上传文件的内容,然后再通过nodejs的buffer的知识,将获取到的文件流输出到准备好的目录中.于是就悲剧了.下面是获取图片资源的代码. 运行结果 首先获取资源是非常的慢,要等几分钟才会输出内容.后来看到可以在每一步获取文件流时就进行文件处理,不必等所有内容获取后再操作.但是随之又产生了一个新问题,就是获取来的文件内容中不仅包

基于Nodejs的大文件上传之断点续传

接着<扒一扒Nodejs formidable的onPart>和<也说文件上传之兼容IE789的进度条---丢掉flash>:前面已完成兼容IE789的大文件上传:无flash的低版本进度条,高版本的分段上传,并已为断点续传做好铺垫: 说什么做好铺垫,原本以为Nodejs端已没问题,只剩前端依靠HTML5接着监听abort事件,保存中断时上传到第几块了(断点续传只支持文件比较大,然后意外上传中断了,暂时定50M开启断点续传吧),通过文件内容hash和该文件唯一上传token来记录断

Nodejs+HTML5兼容IE789的大文件上传完整版

业余将大文件上传重新梳理了一遍,后端基于Nodejs:有几个要点感觉很好玩: 兼容性:IE789为代表: 跨域上传:document.domain||middlePage: 多文件上传:input['type=file'] multiple: 拖拽上传:drag drop: 大文件分段:files.slice(s,e): 断点续传:localStorage: 接收分段的文件:formidable.onPart: 陆续写入分段文件:fs.write(fd,bf,offset,length,posi

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

//我是用php的思想来学习nodejs var express = require('express'); var router = express.Router(); var fs = require('fs'); var path= require("path"); var formidable = require('formidable'); /* GET home page. */ router.get('/', function(req, res, next) { res.

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

本文是翻译的一篇文章,原文地址:Handle File Uploads in Express (Node.js). 在NodeJS发展早期上传文件是一个较难操作的功能,随后出现了formidable.它开了一个好头,然而上传文件仍然不是那么容易.在此之后又出现了基于原文作者的教程(tutorial on handling POST requests in Express)而实现的工具connect-form.它让文件上传的过程显得简单了一些. 随着NodeJS社区的飞速发展,让上传文件这个功能变

使用formidable &amp; multiparty实现文件上传

安装 npm install formidable,multiparty –save -d 例子1:使用formidable解析表单 exports.formidableFormParse = function(req,callback){ var obj ={}; var form = new formidable.IncomingForm({ encoding:"utf-8", uploadDir:"public/upload", //文件上传地址 keepEx

nodejs 文件上传

var multipart = require('connect-multiparty'); var fs = require('fs'); var multipartMiddleware = multipart(); router.get('/uploadTest', function (req, res) { res.render('uploadTest', { title: 'Upload File test' }) }); router.post('/uploadTest', multi