转：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数据的更多相关文章

  1. 【转】nodejs接收前端formData数据

    很多时候需要利用formdata数据格式进行前后端交互. 前端代码可以是如下所示: <!DOCTYPE html> <html lang="en"> < ...

  2. angularjs和jquery前端发送以http请求formdata数据

    formdata是比较常见的前端发送给后端的请求,不仅可以上传数据,而且同时可以上传文件. jquery使用http请求上传formdata数据的方法: var formdata = new Form ...

  3. nodejs获取post请求发送的formData数据

    前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...

  4. 【转】nodejs获取post请求发送的formData数据

    前端post请求发送formData的类型数据时,需要服务端引入中间件body-parser,主要原因是post请求发送的数据,是在http的body里面,所以需要进行解析,否则获取不到数据(数据为空 ...

  5. SpringMvc接收multipart/form-data 传输的数据 及 PostMan各类数据类型的区别

    前段时间遇到一个问题,在spring mvc 服务端接收post请求时,通过html 表单提交的时候,服务端能够接收到参数的值.但是使用httpclient4.3构造post请求,却无法接收到参数的值 ...

  6. THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据，会因为一个div而失败

    这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...

  7. php接收json格式数据(text/xml)

    在API服务中,目前流行采用json形式来交互. 给前端调用的接口输出Json数据,这个比较简单,只需要组织好数据,用json_encode($array) 转化一下,前端就得到json格式的数据. ...

  8. [原创作品] Express 4.x 接收表单数据

    好久没有写博客,从现在开始,将介绍用nodejs进行web开发的介绍.欢迎加群讨论:164858883. 之前的express版本在接收表单数据时,可以统一用res.params['参数名'],但在4 ...

  9. nodejs 接收上传的图片

    1.nodejs接收上传的图片主要是使用formidable模块,服务器是使用的express搭建. 引入formidable var formidable = require('./node_mod ...

随机推荐

  1. Hadoop1.x与Hadoop2.x之间的差异

    一.Hadoop2.x产生背景 1.Hadoop1.x中的HDFS和MapReduce在高可用.扩展性等方面存在问题. 2.HDFS存在的问题 1.NameNode单点故障,难以应用于在线场景. 2. ...

  2. 深入理解jvm--性能监控工具

    1.jvm监控工具介绍 1.1.jconsole JConsole是一个基于JMX的GUI工具,用于连接正在运行的JVM,不过此JVM需要使用可管理的模式启动. 1.2.启动jconsole 通过JD ...

  3. xadmin集成DjangoUeditor，以及编辑器的视频路径配置

    稍微讲一下DjangoUeditor的配置,因为之前去找配置的时候东拼西凑的,所以自己写一下自己一步步配置的过程.首先我是再github上去下载下来,因为是当作第三方插件集成到xadmin中,所以不用 ...

  4. idea中新增package总是嵌套的解决方法

    在idea中创建package,为了方便会将com.xx.xx作为一个package,下面添加对应的子package.比如service,config等.但是当我创建是总是会嵌套在下面变成了com.x ...

  5. Linux命令——uname

    简介 uname用于输出系统信息. uname参数 -a :所有系统相关的资讯,包括底下的数据都会被列出来:-s :系统核心名称-r :核心的版本-m :本系统的硬件名称,例如 i686 或 x86_ ...

  6. Linux命令——mknode

    参考:What is the mknod command used for? 前言 Linux下面,一切皆文件,当然也包括设备.Linux通过major.minor号来区分不同设备,如下图

  7. 2019年牛客多校第一场 I题Points Division 线段树+DP

    题目链接 传送门 题意 给你\(n\)个点,每个点的坐标为\((x_i,y_i)\),有两个权值\(a_i,b_i\). 现在要你将它分成\(\mathbb{A},\mathbb{B}\)两部分,使得 ...

  8. Centos7 Mysql主从双机热备的实战记录

    操作系统:centos7 服务器:主:172.19.242.69   从:172.19.242.70 1. 服务器 由于Mysql不同版本之间的(二进制日志)binlog格式可能会不太一样,因此最好的 ...

  9. Mybatis框架-联表查询显示问题解决

    需求:查询结果要求显示用户名,用户密码,用户的角色 因为在用户表中只有用户角色码值,没有对应的名称,角色名称是在码表smbms_role表中,这时我们就需要联表查询了. 这里需要在User实体类中添加 ...

  10. codeforces1276A As Simple as One and Two

    C.As Simple as One and Two A. As Simple as One and Two time limit per test 3 seconds memory limit pe ...