nodejs接收前端formData数据
转:https://www.cnblogs.com/zhensg123/p/11078579.html
很多时候需要利用formdata数据格式进行前后端交互。
前端代码可以是如下所示:
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>上传文件</title>
</head> <body>
<form action="uploads1a" id="myform">
<input type="file" name="image" id="file" />
</form>
<div id="test"></div>
<button id="btn">点击上传</button>
<div>
<img src="" id="see">
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var file=document.getElementById("file");
var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"]; file.onchange=function(){
var name=file.value;
var ext=name.substring(name.lastIndexOf(".") + 1).toLowerCase();
var res=promise.indexOf(ext);
if (res<0) {
alert("文件格式不正确");
document.getElementById("btn").disabled=true;
}else{
document.getElementById("btn").disabled=false;
}
}
btn.onclick = function() {
var val=document.getElementById("file").value;
if (val.length==0) {
return;
}
var fromData = new FormData(document.forms[0]);
fromData.append("test", "formdata");
fromData.append("test1", JSON.stringify({dd:'dd'}));
var oAjax = new XMLHttpRequest();
oAjax.open('post', "/formdata", true);
//oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //formdata数据请求头需设置
oAjax.send(fromData);
oAjax.onreadystatechange = function() {
if (oAjax.readyState == 4) {
if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
console.log(oAjax.responseText);
var data=JSON.parse(oAjax.responseText);
document.getElementById("see").setAttribute("src",data.imgSrc.replace(/public/,''));
document.getElementById("file").value="";
} else {
console.log(oAjax.status);
}
}
};
}
</script>
</body> </html>
上面代码不仅有直接生成的formdata数据,还有利用append添加的。
后端应该怎么接收?
接收方案之一是利用nodejs中间件:multiparty,multiparty是nodejs框架express推荐的中间件。
本文在做接收研究时,采用的是express框架,后端代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var express = require( 'express' ); var router = express.Router(); var multiparty = require( "multiparty" ); router. get ( '/' , function(req, res, next) { res.render( 'formdata' ); }); router.post( '/' , function(req, res, next) { console.log(req.body, "body" ) //生成multiparty对象,并配置上传目标路径 var form = new multiparty.Form({ uploadDir: './public/images' }); form.parse(req, function(err, fields, files) { console.log(fields, files, ' fields2' ) if (err) { } else { res.json({ imgSrc: files.image[0].path }) } }); }); module.exports = router; |
注意在使用中间件时候:
前端不要执行这句:
oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //formdata数据请求头需设置
否则multiparty会失效。 后端除了利用这multiparty去接收,还可以原生去接收。原生接收需要设置
oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //formdata数据请求头需设置
这时候会出现req.body里面,然后去解析,不过貌似有些麻烦。本文也没有处理。
nodejs接收前端formData数据的更多相关文章
- 【转】nodejs接收前端formData数据
很多时候需要利用formdata数据格式进行前后端交互. 前端代码可以是如下所示: <!DOCTYPE html> <html lang="en"> < ...
- angularjs和jquery前端发送以http请求formdata数据
formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...
- nodejs获取post请求发送的formData数据
前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...
- 【转】nodejs获取post请求发送的formData数据
前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...
- SpringMvc接收multipart/form-data 传输的数据 及 PostMan各类数据类型的区别
前段时间遇到一个问题,在spring mvc 服务端接收post请求时,通过html 表单提交的时候,服务端能够接收到参数的值.但是使用httpclient4.3构造post请求,却无法接收到参数的值 ...
- THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据,会因为一个div而失败
这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...
- php接收json格式数据(text/xml)
在API服务中,目前流行采用json形式来交互. 给前端调用的接口输出Json数据,这个比较简单,只需要组织好数据,用json_encode($array) 转化一下,前端就得到json格式的数据. ...
- [原创作品] Express 4.x 接收表单数据
好久没有写博客,从现在开始,将介绍用nodejs进行web开发的介绍.欢迎加群讨论:164858883. 之前的express版本在接收表单数据时,可以统一用res.params['参数名'],但在4 ...
- nodejs 接收上传的图片
1.nodejs接收上传的图片主要是使用formidable模块,服务器是使用的express搭建. 引入formidable var formidable = require('./node_mod ...
随机推荐
- IDEA修改选取单词颜色和搜索结果的颜色
一.修改选取单词颜色 下图所示,选取Father后背景为淡蓝色,其它相同单词背景为灰色,根本看不清楚 修改配置 1.修改选取文本背景色为78C9FF 2.修改相同文本背景色为78C9FF,包括iden ...
- E2E测试工具之--01 Cypress 上手使用
The web has evolved. Finally, testing has too. 1. 简介 cypress 最近很火的e2e(即end to end(端到端))测试框架,它基于node ...
- pinpoint的只是总结
1,对于拓扑图不显示的原因,可能是hbase版本和pp版本不匹配的原因2,calltree中出现 API-METADATA-NOT-FOUND时是因为HBASE中的元数据被清除了,需要重启应用才可以. ...
- jetbreains的crack方法
https://zhile.io/2018/08/20/jetbrains-license-server-crack.html
- 泛微 e-cology OA 远程代码执行漏洞复现
0x00 前言 Poc已在github公开,由于环境搭建较为复杂,所以我在空间搜索引擎中找了国外的网站进行复现 如果有想自行搭建环境复现的可以在公众号内回复“泛微环境”即可获取源码及搭建方式 0x01 ...
- Pollard-rho的质因数分解
思路:见参考文章(原理我是写不粗来了) 代码: 用到了快速幂,米勒罗宾素性检验. #include <iostream> #include <time.h> #include ...
- BZOJ1485: [HNOI2009]有趣的数列(卡特兰数+快速幂)
题目链接 传送门 题面 思路 打表可以发现前六项分别为1,2,5,12,42,132,加上\(n=0\)时的1构成了卡特兰数的前几项. 看别人的题解说把每一个数扫一遍,奇数项当成入栈,偶数项当成出栈, ...
- 学.Net Core Web Api开发 ---- 系列文章
循序渐进学.Net Core Web Api开发系列[1]:开发环境 循序渐进学.Net Core Web Api开发系列[2]:利用Swagger调试WebApi 循序渐进学.Net Core We ...
- ReactiveX 学习笔记(30)操作符辨析
RxJava: merge/concat/switch RxJS: merge/concat/switch/exhaust RxSwift: merge/concat/switchLatest mer ...
- Making Huge Palindromes LightOJ - 1258
题目链接:LightOJ - 1258 1258 - Making Huge Palindromes PDF (English) Statistics Forum Time Limit: 1 se ...