兼容ie9文件上传，解决ie9下提示下载或保存

如果不考虑ie9兼容性，实现【上传图片】大致的思路如下：

由于公司是将所有上传的图片都放到【代理服务器】里。所以【上传图片】其实是上传到【代理服务器】。可以通过ajax，通过FormData将图片上传到【代理服务器】。
从【代理服务器】拿到的回调里，有压缩过的图片的url，将这个url赋值给DOM里图片img的src就行了。由于我们的项目是用的vue，直接绑定：src就行了。
上传图片到【代理服务器】完成后，需要将url等相关数据（我们的项目后端需要一个pid，来实现用户下次访问时，后端从代理服务器根据这个pid来获取相应图片】），通过ajax发给后端（我们公司的服务器）。

思路很简单，而且核心关键其实就是第1点，第2，3只是简单的DOM操作和ajax交换数据。接下来就只关注第1点的具体实现。

1. 通过formData，结合html5的input type=file来实现上传

<input name="file" type="file" @change="update" accept="image/x-png, image/jpg, image/jpeg">

对应的，Vue的methods里，update方法如下：

update(e) {  let file = e.target.files[0]; //input提供的API，如果需要过滤图片尺寸，也可以在e.target.files[0]里拿到相应数据。  let param = new FormData(); //通过FormData来将图片信息发送给服务器；FormData是html5的私有对象。  param.append('file', file, file.name);/* 接下来，就是通过ajax，发送form数据到服务器，我们公司用的jQuery，比较普遍的应该是axios吧 */  $.ajax({    url: '/image/upload',    type: 'POST',    data: param, //保证data格式为FormData    processData: false, //必须false才会自动加上正确的Content-Type    contentType: false //必须false才会避开jQuery对 formdata 的默认处理  }).done(function(res) {  // 回调  })}

然后，在回调里，给DOM里的图片src赋值就行了。

当然，如果不兼容ie9，现在这个方案就行了。

在ie9下，不支持FormData。所以在ie9下，只能通过form表单形式实现图片上传。

2. ie9下通过form表单实现文件上传

<form id="myForm" method="post" action="/image/ieupload" enctype="multipart/form-data">  <input name="file" type="file" @change="update" accept="image/x-png, image/jpg, image/jpeg">  <input id="submit" type="submit" style="display:none"></form>ie9不支持headers上传参数，可以采用参数拼接在接口上

form里，enctype必须为mulitpart/form-data，表单中enctype=”multipart/form-data”的意思，是设置表单的MIME编码。默认情况，这个编码格式是application/x-www-form-urlencoded，不能用于文件上传；只有使用了multipart/form- data，才能完整的传递文件数据。

同时要加上input type=”submit”，只有点击（或者trigger click）这个按钮，才会将数据发送到服务器。

这样，在上面的update方法里，就需要加一层判断，如果不是ie9（或者是浏览器不支持formData），就通过formData结合ajax实现上传图片。通过formData的好处是不用在DOM里写form，（form表单提交，一般的服务器处理方式是重定向），只通过ajax跟后端服务器交换数据可以让接口更加统一。而如果是ie9，则必须要通过form表单提交，在update方法里，通过trigger #submit元素的click事件来完成表单提交。

但是，如果服务器返回的是json，并不能拿到服务器返回的数据，而是直接提示下载或打开：

ie9下，不能拿到回调