1.type="submit"方式

优点：简单，可以上传附件

缺点：数据是单向的传递的，无法获取服务端传回来的信息，因此难以实现一些在数据传过去但服务器还未处理成功返回响应的中间状态界面。

（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 false"点击事件；

5.利用form的onsubmit事件,onsubmit="return false"为阻止表单提交事件。

2.发送ajax请求

优点：便于获取后台返回的数据

缺点：若不用库，使用原生ajax代码繁复

此处讲利用promise封装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属性中存储着FileList ，该对象包括每个已选择的文件，如果 multiple 属性没有指定，则这个列表只有一个成员。files属性中还有length属性，存储着FileList的长度。

1.post请求：

post = (url, data) => {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(res => {
      resolve(res.data);
    }).catch(err => {
      reject(err);
    });
  });
};

2.上传文件

upload = (url, data) => {
  return new Promise((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)