formDate序列化 - 常用 | GX = 主人 = 前端工程师

# 1.formData 对象操作方法

get(‘key’) 获取表单对象属性的值
set(‘key’, ‘value’) 设置表单对象属性的值
delete(‘key’) 删除表单对象属性中的值
append(key,value) 在数据末尾追加数据
getAll(‘user’)获取取key为user的所有值 [‘a’,‘b’]

# 2.FormData 作用

1 2	将form表单元素的name与value进行组合，实现表单数据的序列化异步上传二进制文件

3. 在 vue 中使用 fromData 格式传参

首先要创建fromData实例
然后将传入的参数添加到实例中
最后请求接口，将参数传入
例如：
vant组件 上传头像

<van-uploader :after-read="toImg">
    <div>拍照</div>
</van-uploader>




// 头像
toImg(item) {
   let data = new FormData();
   data.append("file", item.file);
   this.$API.imgs(data).then((res) => {
      console.log(res);
     });
   });
 },

原生写法 上传

<!-- 创建普通的html表单 -->
<form id="form">
	<input type="text" name="username">
	<input type="password" name="password">
	<!-- type 设置为button，不会触发form 提交 -->
	<input type="button" id="btn" value="提交">
</form>
<script type="text/javascript">
	// 获取按钮
	var btn = document.getElementById('btn');
	// 获取表单 必须为原生的dom元素
	var form = document.getElementById('form');
	// 为按钮添加点击事件
	btn.onclick = function () {
		// 将普通的html表单转换为表单对象
		var formData = new FormData(form);
		// 创建ajax对象
		var xhr = new XMLHttpRequest();
		// 对ajax对象进行配置
		xhr.open('post', 'http://localhost:3000/formData');
		// 发送ajax请求
		xhr.send(formData);
		// 监听xhr对象下面的onload事件
		xhr.onload = function () {
			// 对象http状态码进行判断
			if (xhr.status == 200) {
				console.log(xhr.responseText);
			}
		}
	}
</script>

formDate