一般来说,客户端向服务端提交数据有GETPOST这两种方式,在之前的文章node.js当中的http模块与url模块的简单介绍当中我们可以知道通过req.urlurl模块的配合处理可以快速得到客户端通过GET方式向服务端提交的数据。而原生的node.js在处理客户端以POST方式提交的数据时,比较复杂,要写两个监听,并且要处理上传的图片、文件也比较艰难。故我们常用第三方模块包formidable来处理客户端以POST方式提交的表单、文件、图片等。

一、formidable处理POST方式提交的表单数据

1、下载并引包

在当前的项目文件夹下,用命令-> npm install formidable 来在当前文件夹下载formidable。再通过const formidable = require('formidable');来引包。

2、创建基本的表单结构

我们新建一个表单页面form.html放在服务端,与主文件1.js放在同一个目录下。如下图所示:

在主文件1.js当中,我们设计路由为,当用户访问根目录时,呈递该表单页面,当用户完成表单信息填写,用submit进行提交之后,默认跳转至路由http://192.168.155.1:3000/dopost,(一定要加上指定的端口号),则我们设计在这一条路由当中来使用formidable来进行处理。则1.js主文件的骨架代码为:

const formidable = require('formidable');
const fs = require('fs');
const path = require('path');
const http = require('http');
var server = http.createServer((req,res)=>{
if(req.url == '/'){
var target = path.join(__dirname,'./form.html');
fs.readFile(target,(err,data)=>{
if(err) throw err;
res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
res.end(data);
});
}else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){ }else{
res.writeHead(404,{"Content-Type":"text/html;charset=UTF8"});
res.end("找不到该页面!");
}
});
server.listen(3000,'192.168.155.1');
3、使用formidable来处理表单数据

常用代码段为

var form = new formidable.IncomingForm();
form.parse(req,function(err,fields,files){});

其中当服务端全部接收完客户端用post方式提交的表单数据之后,触发执行该回调函数。以post方式提交的表单域数据都放在fields这个对象当中,以post方式上传的文件、图片等文件域数据都放在files这个对象当中。

则我们在第二条路由选择的分支当中的代码示例为:

else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){
var form = new formidable.IncomingForm();
form.parse(req,function(err,fields,files){
if(err) throw err;
console.log(fields);
res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
res.end('表单提交成功!');
});
}

此时完成表单数据填写并提交之后,结果为:

二、formidable处理POST方式上传的文件或图片

通过上述方式进行下载与引包之后,form.html文件与主文件1.js仍处于同一目录下,form.html当中的示例代码为:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<form action="http://192.168.155.1:3000/dopost" method="POST" enctype="multipart/form-data">
<p><input type="file" name="uploadImg"></p>
<p><input type="submit" value="提交"></p>
</form>
</body>
</html>

当表单提交的过程中涉及文件或图片上传,则一定要设置表单头,即在form标签上加上固定写法的属性为enctype="multipart/form-data",否则文件或图片会上传失败。其中<input type="file" name="uploadImg">,当中的name属性一定要赋值。

其中主文件1.js的骨架代码也与上述的相似。当要使用formidable来处理上传的图片时,常用的代码段为:

var form = new formidable.IncomingForm();
form.uploadDir = targetFile;
form.parse(req,function(err,fields,files){});

其中targetFile为一个自定义的变量,用于设置文件或图片上传的存放路径,为绝对物理路径。该目标地址的文件夹必须能实现存在,这样才能确保文件能顺利上传。其中当服务端全部接收完客户端用post方式提交的文件或图片之后,触发执行该回调函数。以post方式提交的表单域数据都放在fields这个对象当中,以post方式上传的文件、图片等文件域数据都放在files这个对象当中。则我们在第二条路由选择的分支当中的代码示例为:

else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){
var form = new formidable.IncomingForm();
var targetFile = path.join(__dirname,'./upload');
form.uploadDir = targetFile;
form.parse(req,function(err,fields,files){
if(err) throw err;
console.log(files);
res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
res.end('表单提交成功!');
});
}

在完成图片的选择与上传之后,结果为:

此时可以看到在主文件1.js的同一目录下的upload文件夹当中多了一个随机名字,并且没有后缀名的文件。由于没有后缀名,所以该图片在编辑器当中无法正常显示。

我们可以在接收到上传的图片之后,使用fs.rename()方法对其进行改名的操作,使其上传之后的文件名与之前的保持一致,并且包含后缀名的部分。
我们从控制台打印的信息可以看出其中files.uploadImg.path代表该图片上传之后存放的绝对物理路径。其中files.uploadImg.name代表该图片原来的文件名部分(包含扩展名的信息)。我们加入了上传改名的功能之后,第二条路由选择分支当中的示例代码为:

else if(req.url == '/dopost' && req.method.toLowerCase() == 'post'){
var form = new formidable.IncomingForm();
var targetFile = path.join(__dirname,'./upload');
form.uploadDir = targetFile;
form.parse(req,function(err,fields,files){
if(err) throw err;
var oldpath = files.uploadImg.path;
var newpath = path.join(path.dirname(oldpath),files.uploadImg.name);
fs.rename(oldpath,newpath,(err)=>{
if(err) throw err;
res.writeHead(200,{"Content-Type":"text/html;charset=UTF8"});
res.end('文件上传并改名成功!');
})
});
}

formidable处理提交的表单或文件的简单介绍的更多相关文章

  1. formidable处理提交的表单或图片文件的简单介绍

    一般来说,客户端向服务端提交数据有GET和POST这两种方式,在之前的文章node.js当中的http模块与url模块的简单介绍当中我们可以知道通过req.url与url模块的配合处理可以快速得到客户 ...

  2. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

  3. 标签form表单里的属性简单介绍了一下

    <form id="form1" name="form1" method="post" action=""> ...

  4. .net c# 提交包含文件file 的form表单 获得文件的Stream流

    1.前台html代码 要写一个有id的form,可是不能有runat="server"属性.由于一个页面中,有这个属性的form表单仅仅能有一个. 再要有一个有name的ifram ...

  5. 使用ajax提交form表单,包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  6. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  7. ajax 提交所有表单内容及上传图片(文件),以及单独上传某个图片(文件)

    我以演示上传图片为例子: java代码如下(前端童鞋可以直接跳过看下面的html及js): package com.vatuu.web.action; import java.io.File; imp ...

  8. Ajax提交form表单内容和文件(jQuery.form.js)

    jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...

  9. httpurlconnection模拟post提交form表单(普通文本和上传文件) (

    http://blog.sina.com.cn/s/blog_8417657f0101gvpc.html 用HttpUrlConnection模拟post表单进行文件上传平时很少使用,比较麻烦. 原理 ...

随机推荐

  1. 关于Oracle12c中无scott用户的问题

    我目前预习是通过视频,学到此处视频里的老师要登录scott用户,而我无法登陆,显示用户不存在,虽然在Oracle文件中也可以找到scott.sql文件,但经过网上教程创建用户后我觉得很麻烦而且没有成功 ...

  2. golang实现get和post请求的服务端和客户端

    服务端 在golang中,实现一个普通的http接口可以处理get请求和x-www-form-urlencoded类型的post请求,而如果想实现处理json数据的post请求,则需要用另外的方式实现 ...

  3. response向客户端写入数据

    1.写入文字: protected void doGet(HttpServletRequest request, HttpServletResponse response) throws Servle ...

  4. CSS——边框设置

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. windows下docker与.net core 的简单示例

    一 windows 下安装docker 二 .net core 项目 新建一个空的ASP.NET Core Web 应用程序 在该项目的目录下执行dotnet publish,可以看到在bin\Deb ...

  6. 创建进程池与线程池concurrent.futures模块的使用

    一.进程池. 当并发的任务数量远远大于计算机所能承受的范围,即无法一次性开启过多的任务数量就应该考虑去 限制进程数或线程数,从而保证服务器不会因超载而瘫痪.这时候就出现了进程池和线程池. 二.conc ...

  7. 2019年研究生数学建模D题《汽车行驶工况构建》解析

    正在整理...

  8. Kubernetes学习之应用部署变迁

    从物理单机.虚拟化(容器化)到云原生 历史 云原生 ---初期 总结

  9. Netty源码分析 (十二)----- 心跳服务之 IdleStateHandler 源码分析

    什么是心跳机制? 心跳说的是在客户端和服务端在互相建立ESTABLISH状态的时候,如何通过发送一个最简单的包来保持连接的存活,还有监控另一边服务的可用性等. 心跳包的作用 保活Q:为什么说心跳机制能 ...

  10. UITableView tableHeaderView 自动布局

    let size = headerView.systemLayoutSizeFitting(UIView.layoutFittingCompressedSize) headerView.frame.s ...