党校学习个人总结
表单提交的两种⽅式
优点：简单，可以上传附件
缺点：数据是单向的传递的，⽆法获取服务端传回来的信息，因此难以实现⼀些在数据传过去但服务器还未处理成功返回响应的中间状态界⾯。
（1）使⽤form表单进⾏上传⽂件需要为form添加enctype=”multipart/form-data” 属性，除此之外还需要将表单的提交⽅法改成post, method=”post”, input type的类型需要设置为file
（2）input的submit按钮会导致表单提交和页⾯跳转，即使action为空也会刷新页⾯，有时容易导致⼀些错误。
阻⽌表单提交的⽅法：
1.将标签内按钮类型从type="submit"修改为type="button"可阻⽌表单提交；
2.表单内的button未指定类型时，默认的类型为submit，可以显式的修改为type="button"来阻⽌表单提交；
3.利⽤event.preventDefault()⽅法，给提交按钮绑定点击事件；
4.给提交按钮绑定οnclick="return fal"点击事件；
5.利⽤form的onsubmit事件,onsubmit="return fal"为阻⽌表单提交事件。
2.发送ajax请求
优点：便于获取后台返回的数据
女的笔顺笔画
缺点：若不⽤库，使⽤原⽣ajax代码繁复
捐书平台此处讲利⽤promi封装axios实现
type="file"类型的input，通过为该元素绑定onchange事件来获取输⼊的⽂件的各种信息，此处是利⽤vue框架的实现：
<input ref="fileId" @change="onChange" type="file" multiple="multiple">
onChange() {
this.file = this.$refs.fileId.files[0];//获取所选的第⼀个⽂件
绿茶是什么茶
console.log(this.file);
console.log(this.$refs.fileId.files);//打印整个⽂件列表
}
（1）可以利⽤其value（element.value)属性获得所选⽂件的路径，不过为了安全现在都⽆法获取真实的绝对路径，获取的时是
C:\fakepath\⽂档.xlsx。
（2）可以利⽤files(element.files)属性获得所选的⽂件，files属性中存储着 ，该对象包括每个已选择的⽂件，如果 属性没有指定，则这个列表只有⼀个成员。files属性中还有length属性，存储着的长度。
1.post请求：
post = (url, data) => {
return new Promi((resolve, reject) => {
会议通
axios.post(url, data).then(res => {
resolve(res.data);
}).catch(err => {
reject(err);
});
});
};工程总监
2.上传⽂件
upload = (url, data) => {
return new Promi((resolve, reject) => {
axios.post(url, data, {
梦见家里很脏很乱
headers: {'Content-Type': 'multipart/form-data'}
}).then(res => {
resolve(res.data);
}).catch(err => {
reject(err);
});
});
};
发请求时的data数据需要利⽤FormData对象，将数据以键值对的形式去发送，如下：
let formdata = new FormData();
formdata.append("dirName", this.dirName);//⽂本
梨的简笔画图片formdata.append("file", this.file);//⽂件
upload('/path1',formdata)
