很多时候需要利用formdata数据格式进行前后端交互。

前端代码可以是如下所示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>上传文件</title>
  7. </head>
  8.  
  9. <body>
  10.     <form action="uploads1a" id="myform">
  11.         <input type="file" name="image" id="file" />
  12.     </form>
  13.     <div id="test"></div>
  14.     <button id="btn">点击上传</button>
  15.     <div>
  16.         <img src="" id="see">
  17.     </div>
  18.     <script type="text/javascript">
  19.     var btn = document.getElementById("btn");
  20.     var file=document.getElementById("file");
  21.     var promise=["png","jpg","jpeg","gif","mp3","mp4","svg"];
  22.  
  23.     file.onchange=function(){
  24.         var name=file.value;
  25.         var ext=name.substring(name.lastIndexOf(".") + 1).toLowerCase();
  26.         var res=promise.indexOf(ext);
  27.         if (res<0) {
  28.             alert("文件格式不正确");
  29.             document.getElementById("btn").disabled=true;
  30.         }else{
  31.             document.getElementById("btn").disabled=false;
  32.         }
  33.     }
  34.     btn.onclick = function() {
  35.         var val=document.getElementById("file").value;
  36.         if (val.length==0) {
  37.             return;
  38.         }
  39.         var fromData = new FormData(document.forms[0]);
  40.         fromData.append("test", "formdata");
  41.         fromData.append("test1", JSON.stringify({dd:'dd'}));
  42.         var oAjax = new XMLHttpRequest();
  43.         oAjax.open('post', "/formdata", true);
  44.         //oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //formdata数据请求头需设置
  45.         oAjax.send(fromData);
  46.         oAjax.onreadystatechange = function() {
  47.             if (oAjax.readyState == 4) {
  48.                 if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
  49.                     console.log(oAjax.responseText);
  50.                     var data=JSON.parse(oAjax.responseText);
  51.                     document.getElementById("see").setAttribute("src",data.imgSrc.replace(/public/,''));
  52.                     document.getElementById("file").value="";
  53.                 } else {
  54.                     console.log(oAjax.status);
  55.                 }
  56.             }
  57.         };
  58.     }
  59.     </script>
  60. </body>
  61.  
  62. </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;

　　注意在使用中间件时候：

  1.   前端不要执行这句:
      oAjax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //formdata数据请求头需设置
      否则multiparty会失效。
  2.  
  3.   后端除了利用这multiparty去接收，还可以原生去接收。原生接收需要设置
  1. 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. C++——Big Three（copy ctor、copy op=、dtor）

    Big Three C++ 中Big Three指的是copy ctor 和 copy op=  和  dtor m_data是个字符串指针.一般而言,处理字符串,都是使用指针,在需要存储字符的时候再 ...

  2. [Git]checkout 指定版本

    Task:知道commit号,如何checkout 指定版本 1. 切换到master: git checkout master 2. 下载最新代码:  git pull 3. 下载head: git ...

  3. Redis数据缓存淘汰策略【FIFO 、LRU、LFU】

    FIFO.LFU.LRU FIFO:先进先出算法 FIFO(First in First out),先进先出.在FIFO Cache设计中,核心原则就是:如果一个数据最先进入缓存中,则应该最早淘汰掉. ...

  4. RT-Thread--中断管理

    Cortex-M CPU架构基础 寄存器简介 Cortex-M 系列 CPU 的寄存器组里有 R0\~R15 共 16 个通用寄存器组和若干特殊功能寄存器,如下图所示. 通用寄存器组里的 R13 作为 ...

  5. JAVA HASH学习

    就HASH的目的来说,是为了解决内容摘要与快速索引的问题:而其算法也比较多样. JDK实现中,对String类的hashcode()进行了重载: public int hashCode() { int ...

  6. python中赋值和浅拷贝与深拷贝

    初学编程的小伙伴都会对于深浅拷贝的用法有些疑问,今天我们就结合python变量存储的特性从内存的角度来谈一谈赋值和深浅拷贝~~~ 预备知识一——python的变量及其存储 在详细的了解python中赋 ...

  7. 3星|华杉华楠《超级符号原理》：超级符号是指注册为商标的企业logo

    “ 超级符号是私有财产,超级符号是通过对传统符号的改造,使之成为注册商标,成为私有化财产,通过占有它,让竞争对手无法使用.P112” 超级符号原理 作者: 华杉 华楠 出版社: 文汇出版社 出版年: ...

  8. comm shell command

    1.awk command 1.1 Purpose 1: want to distinct and then count and sort by num 1.1.1 Command: cat resu ...

  9. 阿里云轻量级服务器和NGINX部署Django项目

    部署条件: 1.一台阿里云服务器(本人的是CentOS系统的服务器) 2.已经构建好的项目 3.服务器上安装并配置Nginx 首先第一步:在服务器上安装并配置Nginx 进入服务器 $ ssh roo ...

  10. 理解*arg 、**kwargs

    这两个是python中的可变参数.*args表示任何多个无名参数,它是一个tuple(元祖):**kwargs表示关键字参数,它是一个dict(字典).并且同时使用*args和**kwargs时,必须 ...