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框架,后端代码:

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/mmzuo-798/p/11101788.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


根据官网 入门 express
java叫接口control什么的app.get.post等等都是请求方式我们可以在游览器输入localhost端口/或者在Apifox里面写。
为了前端丢进去的时候可以直接判断中间件就是经过了这个就会被使用可以做一些自己的数据处理什么的。
Express 文件的上传和下载
运行命令下载app.js 增加中间件。
基本模板来的 后面用后就有什么加什么都行。
此篇完成 增删 刷新文件 的基本操作
最基本的创建 以及 添加了其他的一些插件 登录接口和四个接口
由于每个接口都要放就很麻烦 所以做个中间件
1importre234defstrip_operate(exp):#合并多余的操作符5exp=exp.replace("+-","-")6exp=exp.replace("--","+")7returnexp8910defcal_exp_son(exp_son):#计算两数的乘除11if&
 socket.html<script>//高级api不兼容socket.io//http单向的,socket是双向的,传输都靠tcpletsocket=newWebSocket('ws://localhost:3000')socket.onopen=()=>{//多个页面通信就是先发给服务器,服务器再发给另一个页面socket.send('我
M模式:类,表示数据的应用程序和使用验证逻辑以强制实施针对这些数据的业务规则。V视图:应用程序使用动态生成HTML响应的模板文件。C控制器:处理传入的浏览器请求的类中检索模型数据,然后指定将响应返回到浏览器的视图模板。简单练习: 1、添加ControllerHelloWorldControlle
在Node开发中免不了要使用框架,比如express、koa、koa2拿使用的最多的express来举例子开发中肯定会用到很多类似于下面的这种代码varexpress=require('express');varapp=express();app.listen(3000,function(){console.log('listen3000...');});app.use(middle
node的http创建服务与利用Express框架有何不同原生http模块与使用express框架对比:consthttp=require("http");letserver=http.createServer(function(req,res){//服务器收到浏览器web请求后,打印一句话console.log("recvreqfrombrowser");
编辑nginx文件vi/usr/local/etcginxginx.confnginx配置如下,配置后需重启nginxnginx-sreloadlocation~.*\.json{roothtml;add_header"Access-Control-Allow-Origin""*";}前端index.html<script>fetch('http://localhost:12
constexpress=require('express')constapp=express()//步骤的拆解constresult=express.static('./views')app.use(result)//再次托管一下样式表的资源目录app.use('/css',express.static('./css'))//托管JS文件目录app.use('/js&#
问题描述:最近在做毕设,express里边的中间件(body-parser)失效,req.body获取不到任何值,req.query能获取到值。一开始加body-parser中间件是有用的,直到昨天加了token之后,body-parser失效。试着把token去掉,无济于事,也不是这个问题,也有说版本对不上的,换了中间件的引入方法,还是没用!!! 后
express官网:---->传送门 expressexpress框架有许多功能,比如路由配置,中间件,对于想配置服务器的前端来说,非常便捷自从node发展之后,基于nodejs的开发框架也不断涌现出来,express就是其中之一,最近简单的写了点express框架的简单的处理请求的demo首先是安装express模块npminstall
目录问题: 操作:Win+S按键,输入“事件查看器”问题详情:模块DLLC:\ProgramFiles(x86)\IISExpress\aspnetcore.dll未能加载。返回的数据为错误信息。问题:  操作:Win+S按键,输入“事件查看器” 问题详情:模块DLLC:\ProgramFiles(x86)\IISExpress\aspnetcore.dll
//获取阿里云市场,快递物流记录https://market.aliyun.com/products/56928004/cmapi022273.html?spm=5176.2020520132.101.26.61f97218v18GBF#sku=yuncode1627300000//get_express_log(self::$config['web']['aliyun_AppCode']阿里云市场AppCode,缓存秒数如300秒,'快递公司代