首先介绍一下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);
}
})
})