首先介绍一下FormData对象的使用:
1.自动将全部表单对象中的数据拼接成请求参数的格式
2.异步上传二进制文件

FormData对象的使用:
1.准备HTML表单

<form id="form">
			<input type="text" name="username"/>
			<input type="password" name="password"/>
			<button type="button" id="btn">提交</button>
		</form>

2.将HTML表单转化为formdata对象

var form = document.querySelector('#form');
var formData = new FormData(form);

3.使用ajax发送post请求

//获取按钮
	var btn = document.querySelector('#btn');
	btn.addEventListener('click',function(){
		//将普通的html表单转换为表单对象
		var form = document.querySelector('#form');
		var formData = new FormData(form);
		//创建ajax对象
		var xhr = new XMLHttpRequest();
		xhr.open('post','http://localhost:3000/formData');
		xhr.send(formData);
		xhr.onload = function(){
			if(xhr.status == 200){
				console.log(xhr.responseText);
			}
		}
	})

后台处理:
下载依赖formidable

const formidable = require('formidable');
const express = require('express');
const app = express();

app.post('/formData',(req,res)=>{
	//创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	//解析客户端传递过来的formData对象
	form.parse(req,(err,fields,files)=>{
		//req:请求对象,err错误对象,filelds:普通请求参数的内容
		//files:文件的内容
		res.send(fields);
	})
})

FormData对象的实例方法:

1.获取表单对象中属性的值:
formData.get('key');
2.设置表单对象中属性的值:
formData.set('key','value');
3.删除表单对象中属性的值
formData.delete('key');
4.向表单对象中追加值
formData.append('key','value');

formData文件上传:文件类型(图片,视频,音频,txt,rar)

1.前端代码:

	<input type="file" id="file"/>
			
	<script type="text/javascript">
		
		//获取文件选择表单
		var file = document.querySelector('#file');
		//为选择文件表单添加onchanges事件,选择文件时触发
		file.onchange = function(){
			var formData = new FormData();
			//将用户选择的文件追加到form对象当中
			formData.append('attrName',this.files[0]);
			var xhr = new XMLHttpRequest();
			xhr.open('post','http://localhost:3000/upload');
			xhr.send(formData);
			xhr.onload = function(){
				//如果请求成功
				if(xhr.status == 200){
					console.log(xhr.responseText);
				}
			}
		}
	</script>

后端代码:

const formidable = require('formidable');
const express = require('express');
const path = require('path');
const app = express();

app.all("*",function(req,res,next){
  //设置允许跨域的域名,*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");
  res.header("Access-Control-Allow-Credentials",true);
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("Content-Type","application/json;charset=utf-8")
  if (req.method.toLowerCase() == 'options')
    res.sendStatus(200);  //让options尝试请求快速结束
  else
    next();
});


app.post('/upload',(req,res)=>{
	//创建formidable表单解析对象
	const form = new formidable.IncomingForm();
	//保留上传文件的后缀名字
	form.keepExtensions = true;
	//设置上传文件的保存路径
	form.uploadDir = path.join(__dirname,'uploads');
	
	//解析客户端传递过来的formData对象
	form.parse(req,(err,fields,files)=>{
		//req:请求对象,err错误对象,filelds:普通请求参数的内容
		//files:文件的内容的参数包括保存的地址信息
		//成功之后响应一个ok
		res.send('ok');
	})
})
app.listen(3000);

选择文件之后发现uploads文件夹下面多了图片
在这里插入图片描述
在这里插入图片描述

files当中的数据
在这里插入图片描述

修改文件名称:

//oldpath和newpath都是相对于app.js文件的相对路径
fs.rename(oldPath, newPath, function(err) {
        if (err) {
            throw err;
        }
    });

fs.rename是异步代码,需要写在form.parse当中,而且可以更改后缀名

form.parse(req,(err,fields,files)=>{
		//req:请求对象,err错误对象,filelds:普通请求参数的内容
		//files:文件的内容的参数包括保存的地址信息
		//成功之后响应一个ok
		//files.attrName.originalFilename;可以拿到文件上传之前的名字
		oldPath = files.attrName.newFilename;
		console.log(oldPath);
		oldPath = './uploads/'+oldPath;
		var name = './uploads/'+files.attrName.originalFilename;
		fs.rename(oldPath,name,function(err){
				        if(err){
				              console.error("改名失败"+err);
				        }
				})
	})
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐