nodejs接收前端formData数据

Posted 2022-02-19 mmzuo-798

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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框架，后端代码：

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数据的主要内容，如果未能解决你的问题，请参考以下文章

在 Zapier 的 NodeJS 模块中发布表单数据

formdata后端只读到file

H5拖放+FormData接口+NodeJS，完整异步文件上传

ajax2.0

koa-body4接收formData数据

FormData对象