废话不多说，直接上代码：

前端页面：

<!DOCTYPE html>
<html>
<head>
<link rel=’stylesheet’ href=’/stylesheets/style.css’ />
</head>
<body>
<h5>信息:<%= locals.title %></h5>
<p>Welcome to <%= title %></p>

<img src='./images/<%= locals.imginfo %>' width='200'/>

<h2><%= locals.username %></h2>

<form method="post" enctype="multipart/form-data" action="/file-upload">
<input type="text" name="username">
<input type="password" name="password">
<input type="file" name="thumbnail">
<input type="submit">
</form>
</body>
</html>

后端处理：

//formidable
router.get('/formidable', function(req, res, next) {
res.render('formidable', {
title: 'formidable'
});
});

router.post('/file-upload', function(req, res, next) {
console.log('开始文件上传....');
var form = new formidable.IncomingForm();
//设置编辑
form.encoding = 'utf-8';
//设置文件存储路径
form.uploadDir = "./public/images/";
//保留后缀
form.keepExtensions = true;
//设置单文件大小限制
form.maxFieldsSize = 2 * 1024 * 1024;
//form.maxFields = 1000; 设置所以文件的大小总和

form.parse(req, function(err, fields, files) {
//console.log(fields);
// var originName=files.thumbnail.name;
console.log(files.thumbnail.path);
console.log('文件名:' + files.thumbnail.name);

//随机文件名调用
var t = (new Date()).getTime();
//生成随机数
var ran = parseInt(Math.random() * 8999 + 10000);
//拿到扩展名
var extname = path.extname(files.thumbnail.name);

var username = fields.username;
var password = fields.password;

//文本测试
console.log('name:' + username);
console.log('pass:' + password);

var oldpath = path.normalize(files.thumbnail.path);

//新的路径
//随机文件名调用
// let newfilename=t+ran+extname;
var newfilename = files.thumbnail.name;

//插入数据库
var img = new Img({
username: username,
newfilename: newfilename
})
img.save(function(err) {
if(err) {
console.log(err);
//res.send(400);
} else {
console.log("信息提交成功!");
res.render('formidable', { title: '文件上传成功:', imginfo: newfilename,name:username
});
}
});

var newpath = './public/images/' + newfilename;
console.warn('oldpath:' + oldpath + ' newpath:' + newpath);
fs.rename(oldpath, newpath, function(err) {
if(err) {
console.error("改名失败" + err);
}

//随机文件名调用
//res.render('formidable', { title: '文件上传成功:', imginfo: newfilename,name:username});

//原文件名
//res.render('formidable', { title: '文件上传成功:', imginfo: originName,name:username});
});

//res.end(util.inspect({fields: fields, files: files}));
});

});

nodejs formidable混合表单提交的更多相关文章

  1. nodejs学习之表单提交(1)

    nodejs作为一门后端语言,接触的最多的是它的框架,但是它本身的api我觉得更是非学不可,所有才有了这篇文章 表单提交是最基本的也是最实用的入门实例 HTML: <!DOCTYPE html& ...

  2. php框架中的phalcon框架的安装，及初步认识，从表单提交简单的数据到数据库中

    php框架中的phalcon框架的安装,及初步认识,从表单提交简单的数据到数据库中 1.phalcon框架的安装: phalcon框架在windows本地安装可以利用wamp软件,安装之后可以查看对应 ...

  3. 如何用elementui去实现图片上传和表单提交，用axios的post方法

    下面是在vue搭建的脚手架项目中的组件component文件夹下面的upload.vue文件中的内容 <!--这个组件主要用来研究upload这个elementui的上传插件组件--> & ...

  4. 混合表单文件上传到数据库（基于TOMCAT）

    在实际的开发中在实现文件上传的同时肯定还有其他信息需要保存到数据库,就像混合表单在上传完毕之后需要将提交的基本信息插入数据库. 在这个demo中需要用到这个架包来帮助实现 1.定义一个公共类实现文件上 ...

  5. node07---post请求、表单提交、文件上传

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. from表单提交数据之后，后台对象接受不到值

    如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...

  7. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  8. golang-web框架revel一个表单提交的总结

    这里要介绍好是revel框架的表单post提交的列子,主要是用于入门学习,和一些知识点的讲解: 首先: 来了解一个问题那就是重复提交表单,做过form表单提交的同学都知道,如果表单提交后不做处理,那么 ...

  9. 关于我们经常用到的form表单提交

    工作中遇到了太多太多的表单提交问题,曾经学过一个HTML的表单提交给 另外一个HTML页面,对于后台怎么获取有点想不起来了. 今天便做了几个实验,提交订单到后台,来掩饰后台如何接受表单内容: 实验 一 ...

随机推荐

  1. 初涉算法——STL初步

    一.头文件<algorithm> ①sort函数 sort使用数组元素默认的大小比较运算符进行排序,只有在需要按照特殊依据进行排序时才需要传入额外的比较函数: sort可以给任意对象排序( ...

  2. c语言乐曲演奏——《千本樱》

    这个程序着实花费了我好长的时间,我本身对音乐一窍不通,先是跟着girl friend学习了简谱,根据c调44拍的<千本樱>写下了下面的程序. #include<stdio.h> ...

  3. vs调试时报503错误

    开发中遇到了一个神问题,困扰了几个月没解决. 在本机调试,或者用iis服务器直接指向项目目录,访问网页任何页面都是报503. 一直找不到原因,配置文件也修改了,还是解决不了. 今天20170110一次 ...

  4. TCP系列30—窗口管理&流控—4、Cork算法

    一.Cork算法概述 Cork算法与Nagle算法类似,也有人把Cork算法称呼为super-Nagle.Nagle算法提出的背景是网络因为大量小包小包而导致利用率低下产生网络拥塞,网络发生拥塞的时候 ...

  5. html .net 网页，网站标题添图标

    <link rel="icon" href="../favicon.ico" type="image/x-icon" /> &l ...

  6. HDU 2068 Choose the best route

    http://acm.hdu.edu.cn/showproblem.php?pid=2680 Problem Description One day , Kiki wants to visit one ...

  7. KindEditor是一套很方便的html编译器插件

    KindEditor是一套很方便的html编译器插件.在这里做一个简单的使用介绍. 首先在官网上下载最新的KindEditor文件(里面有jsp,asp等不同版本文件夹,可以删掉你不需要的版本), 把 ...

  8. Python爬虫requests判断请求超时并重新发送请求

     下面是简单的一个重复请求过程,更高级更简单的请移步本博客: https://www.cnblogs.com/fanjp666888/p/9796943.html  在爬虫的执行当中,总会遇到请求连接 ...

  9. 【Python】PYTHON 函数局部变量和全局变量

    有这样一段PYTHON代码,从事C语言开发的人都知道,如果定义了全局变量,而函数内没有定义同名的函数变量的话,那么在函数内对该变量的赋值就是对全局变量空间数值的修改, 然后在PYTHON中却不尽相同, ...

  10. servlet的service特性就是http协议的特性 即连接完就断开

    servlet的service特性就是http协议的特性 即连接完就断开