FormData有两种使用方式
第一种: 一般用于文件上传
(1)先创建一个空的FormData: let fd = new FormData()
(2)使用append()添加参数: fd.append('参数名',参数值)
第二种: 一键获取form表单所有参数
let fd = new FormData( form元素 )
(1)参数必须是form标签,其他标签会报错。
(2)fd底层自动帮我们遍历form里面的每一个表单, 将name属性作为参数名,value作为参数值
1. 文件上传
文件上传思路
1. 给file表单注册onchange事件
* 当用户选择图片之后执行
2. 获取用户选择的图片
* this.files[0]
3. 创建FormData对象
* 只有FormData才可以上传文件
4. 将图片添加到FormData对象中
* fd.append('参数名', this.files[0])
5. 发送ajax请求
* 文件上传请求方法一定是post, 且请求参数为 FormData对象
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>案例-头像上传</title>
<link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css" />
<style>
.thumb-box {
text-align: center;
margin-top: 50px;
}
.thumb {
width: 250px;
height: 250px;
object-fit: cover;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="thumb-box">
<!-- 头像 -->
<img src="./images/cover.jpg" class="img-thumbnail thumb" alt="" />
<div class="mt-2">
<!-- 文件选择框 -->
<!-- accept 属性表示可选择的文件类型 -->
<!-- image/* 表示只允许选择图片类型的文件 -->
<input type="file" id="iptFile" accept="image/*" />
<br />
<!-- 选择头像图片的按钮 -->
<button class="btn btn-primary" id="btnChoose">选择 & 上传图片</button>
</div>
</div>
<script src="./lib/axios.js"></script>
<script>
//1. file类型表单自带一个选择文件点击按钮，当用户选择文件之后就会触发onchange事件
document.querySelector("#iptFile").onchange = function() {
//this : file表单
//(1)获取用户选择的文件
let file = this.files[0]
// 非空判断，如果内容为undefined，给出提示
if (file == undefined) {
return alert("请选择上传文件！")
}
//(2)创建FormData对象， 只有FormData对象才可以上传文件
let fd = new FormData()
//(3)添加文件
//FormData()接口的append()方法会添加一个新值FormData
//对象内的一个已存在的键中，如果键不存在则会添加该键。
fd.append("avatar", file)
//(4)发送ajax请求, 参数为 FormData对象
axios({
method: "POST",
url: "http://www.liulongbin.top:3009/api/upload/avatar",
data: fd
}).then(({ data: res }) => {
console.log(res)
if (res.code != 200) {
return alert(res.message)
}
// 成功后提示，修改图片路径
alert("恭喜您，上传头像成功！")
document.querySelector("img").src = `http://www.liulongbin.top:3009${res.url}`
})
}
</script>
</body>
</html>
2 表单value值一键上传
//0.表单按钮需要阻止默认跳转
e.preventDefault()
//获取所有的表单
let inputList = document.querySelectorAll('form input')
//1.非空判断(正则验证服务器会处理)
if (Array.from(inputList).some(item => item.value == '')) {
Toast.info('输入框不能为空')
return
}
//2.获取表单参数
一键获取form表单所有参数:
let fd = new FormData( form元素 )
(1)参数必须是form标签,其他标签会报错。
(2)fd底层自动帮我们遍历form里面的每一个表单, 将name属性作为参数名,value作为参数值
*/
let fd = new FormData(document.querySelector('.add-form'))
let data = {}
fd.forEach(function (value, key) {
data[key] = value
})
//判断是新增还是编辑
let url = '/student/add'
let method = 'post'
//编辑ajax与新增ajax不同的地方: (1)路径不同 (2)请求方法不同 (3)多了一个参数id
if( this.innerText == '确认编辑' ){
url = '/student/update'
method = 'put'
data.id = this.dataset.id
}
console.log(data)
//3.ajax发送请求
axios({
url,
method,
data
}).then(res => {
// 添加成功,重新渲染列表
if (res.data.code == 0) {
// a.清空表单
document.querySelector(".add-form").reset()
// b.关闭弹窗
document.querySelector("#addModal .btn-close").click()
// c.成功提示
Toast.success(res.data.message)
// d.重新加载列表
initData()
}
})
})
以上，码字作图很辛苦，还望不要吝啬手中的赞，你的点赞是我继续更新的最大动力😊！
