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

前端页面：

<!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. 机器学习(四)正则化与过拟合问题 Regularization / The Problem of Overfitting

    文章内容均来自斯坦福大学的Andrew Ng教授讲解的Machine Learning课程,本文是针对该课程的个人学习笔记,如有疏漏,请以原课程所讲述内容为准.感谢博主Rachel Zhang 的个人 ...

  2. 4-2：实现cp命令

    #include <stdio.h> #include <sys/stat.h> #include <fcntl.h> #include <unistd.h& ...

  3. 软件工程课堂作业（二）续——升级完整版随机产生四则运算题目（C++）

    一.设计思想: 1.根据题目新设要求,我将它们分为两类:一类是用户输入数目,根据这个数目改变一系列后续问题:另一类是用户输入0或1,分情况解决问题. 2.针对这两类要求,具体设计思路已在上篇博文中写出 ...

  4. sping框架（3）— 使用spring容器

    spring有两个核心接口:BeanFactory和ApplicationContext,其中ApplicationContext是BeanFactory的子接口.它们都可以代表spring容器,sp ...

  5. iOS单利创建的方法

    我们在使用单例的时候有两种方法@synchronized,GCD,往往人们使用@synchronized,但是推荐使用GCD: 第一种(@synchronized): + (id)sharedInst ...

  6. 《学习OpenCV》课后习题解答3

    题目:(P104) 创建一个大小为100*100的三通道RGB图像.将它的元素全部置0.使用指针算法以(20,5)与(40,20)为项点绘制一个绿色平面. 解答: #include "cv. ...

  7. C#Color颜色表

    Color.AliceBlue 240,248,255 Color.LightSalmon 255,160,122 Color.AntiqueWhite 250,235,215 Color.Light ...

  8. Runtime之字典转模型实战

    Runtime之字典转模型实战 先来看看怎么使用Runtime给模型类赋值 iOS开发中的Runtime可谓是功能强大,同时Runtime使用起来也是非常灵活的,今天博客的内容主要就是使用到一丁点的R ...

  9. BZOJ 1898 沼泽鳄鱼(矩阵快速幂)

    没有食人鱼不是裸题吗,用一个向量表示从s到1..N的距离,然后不停乘邻接矩阵行了,当然快速幂 有食人鱼,发现食人鱼最多十二个邻接矩阵一循环,处理出12个作为1个然后快速幂行了   怎么处理呢? 假设食 ...

  10. bzoj3502[PA2012]Tanie Linie(最大k区间和)

    题意:给定一个长为n的数列,要求选出最多k个不相交的区间(可以不选),使得选中的数字之和最大.(1<=k<=n<=1000000)分析:首先我们通过预处理对问题做一些简化.原序列中的 ...