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

前端页面：

<!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. eos开发指南

    十分钟教你开发EOS智能合约 在CSDN.柏链道捷(PDJ Education).HelloEOS.中关村区块链产业联盟主办的「EOS入门及最新技术解读」专场沙龙上,柏链道捷(PDJ Educatio ...

  2. httpd 2.2.15 添加流媒体模块

    项目中使用的一直都是 httpd  2.2.15  用于播放视频资源,近期有个新产品上线发现快进视频会出现卡顿情况,因此添加了流媒体模块.(怀疑是新产品中的播放器进行了更改) 原文:http://li ...

  3. java知乎爬虫

    好久没写博客了,前阵子项目忙着上线,现在有点空闲,就把最近写的一个爬虫和大家分享下,统计结果放在了自己买的阿里云服务器上(点此查看效果),效果如下: 程序是在工作之余写的,用了java 的webmgi ...

  4. #Leetcode# 700. Search in a Binary Search Tree

    https://leetcode.com/problems/search-in-a-binary-search-tree/ Given the root node of a binary search ...

  5. netem设置了网卡的流量控制，为啥发包的延迟就搞不定呢？

    为啥我用netem做了一个流量的控制 但是发送的时候,感觉真正发送数据的时候还是没有达到每一个数据包都是1s的延迟呀,这里的1s的延迟是啥意思啊? 这里的delay并不是说每个数据包都delay 5s ...

  6. Delphi DBGrid双击事件、单元格操作

    1.得到当前格子中的内容:DBGrid1.Fields[DBGrid1.SelectedIndex].DisplayText;把DBGrid1.SelectedIndex改为你所希望引用的字段就可以了 ...

  7. SpringBoot2.0(一) mybatis

    使用mybatis springboot使用mybatis主要依赖 mybatis-spring-boot-starter 来实现.其提供了2中解决方案,一种是使用注解:另一种是简化后的传统的xml方 ...

  8. 升级到EFCore2.0

    EF Core 2.0上周已经发布了 文章内容基于vs2017,请大家先安装好vs2017(15.3). 本篇文章主要讲下差异点,跟之前一样的就不再重复了. 文章目录(差异点): 一.新建项目, EF ...

  9. Codeforces Round #521 Div. 3 玩耍记

    A:签到. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> ...

  10. 深入理解Delete（JavaScript）

    深入理解Delete(JavaScript) Delete  众所周知是删除对象中的属性. 但如果不深入了解delete的真正使用在项目中会出现非常严重的问题 (: Following 是翻译  ka ...