nodejs接收前端formData数据

更新日期: 2019-06-24阅读: 3.1k标签: FormData

很多时候需要利用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框架,后端代码:

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.fly63.com/article/detial/3868

ajax异步图片/文件上传的实现_利用FormData对象

在前后分离开发中,经常会遇到上传文件的情况,后端会有一个文件上传接口,通过ajax上传成功后返回图片地址url给前端。

FormData对象的使用

FormData类型是XMLHttpRequest 2级定义的,它是为序列化表以及创建与表单格式相同的数据提供便利。 作用:1.利用一些键值对来模拟一系列表单控件:即将form中的所有表单元素的name和value组装成一个queryString;2.异步上传二进制文件。

JSON对象转成formData对象,formData对象转成JSON对象

在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码 ;也可使用formData.entries()

form表单经常用到 serialize与new FormData

serialize()和new FormDate()javascript序列化表单的方法,所谓序列化表单就是讲form表单中所有name属性序列化成KEY-VALUE的形式,提交到后台,后台以对象相应的字段接收。

formData详细使用教程

formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

formdata接口的用法详解

FormData接口提供了一种表示表单数据的键值对 name/value 的构造方式,能够将数据通过前端 Ajax 请求发送给后端。FormData的主要用途有两个。

formdata和json区别

Content-Type(内容类型),一般是指网页中存在的 Content-Type,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式、什么编码读取这个文件

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!