nodejs接收前端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.cnblogs.com/zhensg123/p/11078579.html

nodejs接收前端formData数据相关推荐

java controller json_springMVC的controller层接收前端json数据
1.前端的操作: 对象接收json数据方式:将所需要传的数据转化为json数据,并将这些数据以post方式传到后台的controller层,然后controller层接收json数据,并且是以对象的形 ...
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据
JQ中使用FormData+Ajax发送请求及使用express接收处理FormData数据最近写大创项目的时候,要做登录功能,考虑到之后还需要上传头像图片,因此决定使用FormData发送表单请求 ...
SpringBoot接收前端传来的json数据
当前端传来json数据时,后端有多种方式接收前端json数据: {id:121, //数字name:"lhj", //字符串scoreList:[ //对象{Java:95}, ...
form data怎么接收_VUE发送Formdata数据，NodeJS接收
VUE发送Formdata数据 •参数blob是通过this.cropper.getCroppedCanvas().toBlob(blob => { });获取到的.•具体使用方法,参考此链接地 ...
如何在Node.js的httpServer中接收前端发送的arraybuffer数据
最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发 ...
ajax传图片以及后台接收,前端ajax上传文件，图片，后端nodejs接收文件；
前端ajax上传文件,图片,后端nodejs接收文件: 学习了nodejs,就想实现一下有进度条的文件上传,html 在作这个功能的时候遇到的问题前端用普通的ajax没法实现文件上传,只能post, ...
python后端接收数据_python后端开发使用flask接收前端数据，处理后返回结果
from flask import Flask, request import json, time, datetime import pysolr import pandas as pd ''' 使 ...
php怎么传json数据_php怎么接收前端传来的json数据
php怎么接收前端传来的json数据php 如何接收前端传来的json数据前端用JQ 生成一个有字段名和值格式的键值对的JSON 格式的字串转码后提交给后台的PHP 处理代码如下 json_ ...
使用SpringMVC接收前端数据的方式总结（SpringMVC）
方式一第一种方式:通过Httprequest来获取前端请求数据,这也是最常见的一种方式了. 方式二第二种方式:直接获取,通过定义形参(注意对应前端页面元素的name.password属性的值). ...
后端接收前端提交的数据保存到数据库
前端传数组回来(用自定义的封装实体类接收), controller层用dto接收 dto里面包含所有前端返回的字段用于接收前端返回参数太多的情况,并且是在多张表里面,实体类接收不了. service ...

nodejs接收前端formData数据

nodejs接收前端formData数据相关推荐

最新文章

热门文章