很多时候需要利用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里面，然后去解析，不过貌似有些麻烦。本文也没有处理。
转：https://www.cnblogs.com/zhensg123/p/11078579.html

【转】nodejs接收前端formData数据的更多相关文章

  1. nodejs接收前端formData数据

    转:https://www.cnblogs.com/zhensg123/p/11078579.html 很多时候需要利用formdata数据格式进行前后端交互. 前端代码可以是如下所示: <!D ...

  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. jenkins的理解及安装

    目录 一.理论概述 二.安装 一.理论概述 Jenkins的介绍 ​ Jenkins是一个基于MIT License协议的开源软件项目,是基于Java开发的一种持续集成(CI)工具,用于监控持续重复的 ...

  2. java--动态代理设计模式，CGLIB实现的动态代理设计模式

    代理设计模式 代理设计模式的基本形式 代理设计模式的核心思路,一个接口两个子类,一个子类完成核心业务操作,另一个完成与核心业务有关的辅助性操作.例如,编写一个简单的设计模式. package com. ...

  3. Poj-3286- How many 0's? - 【基础数位DP】

    How many 0's? Description A Benedict monk No.16 writes down the decimal representations of all natur ...

  4. 【Java】debug初级使用(Eclipse)

    1.设置.取消断点 双击要设置断点的代码行数字的前面 2.切换成Debug界面 就会发现画面变成了下图这样 以下是调试的界面解说(图源百度) 3.切换为原界面

  5. framebufferfetch in vulkan

    framebufferfetch在ogles上是个扩展 到vulkan这里做成一个基本功能了 对应的是subpass(对照metal) 不同renderpass不能stay on chip 只有sub ...

  6. 多任务4---greenlet完成多任务

    同yield一样 ,单线程,来回切换完成多任务,需要安装greenlet插件 pip install greenlet 代码: from greenlet import greenlet import ...

  7. codeforces#572Div2 E---Count Pairs【数学】【同余】

    题目:http://codeforces.com/contest/1189/problem/E 题意:给定$n$个互不相同数,一个$k$和一个质数$p$.问这$n$个数中有多少对数$(a_i+a_j) ...

  8. python - scrapy 爬虫框架 ( redis去重 )

    1.  使用内置,并加以修改 ( 自定义 redis 存储的 keys ) settings 配置 # ############### scrapy redis连接 ################# ...

  9. BZOJ2155(?) R集合 （卡特兰数）

    Orz Freopen大佬 CODE fac = [0]*1005 def C(n, m): return fac[n] // fac[m] // fac[n-m] n = int(input()) ...

  10. HDU-1028-Ignatius and the Princess III(母函数）

    链接: https://vjudge.net/problem/HDU-1028 题意: "Well, it seems the first problem is too easy. I wi ...