如果不考虑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>
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下提示打开或者保持，是因为：
ie无法解析回调里的json数据，就是说如果服务器返回json数据，ie会把它当做文件来处理，显示打开或保存。
解决方法如下：
在后端返回的时候自定义contype-type为"text/html"，比如在node中这样写res.setHeader('Content-Type', 'text/html')。
参考资料：文件上传返回JSON数据，在IE下提示下载文件
这样改完之后，会发现，虽然现在不提示下载文件了，可是会直接跳转到新页面。
在ajax未诞生前，都是用iframe来实现无刷新的效果。为了避免跳转到新页面，需要手动指定跳转的页面为一个iframe。然后取到iframe里的回调内容后，将相应内容从iframe里取出来使用。
另外，由于因为file是Readonly，如果用户上传的图片不符合要求，想清空value，只能用新的file替换之前的file。
参考资料：http://www.cnblogs.com/nsky/archive/2012/12/28/2836578.html
3. 拓展：本地预览(fileReader)
fileReader就是html5为我们提供的读取文件的api。它的作用就是把文本流按指定格式读取到缓存，以供js调用。
参考资料：上传图片本地预览
通过fileReader的readAsDataURL方法，将文件读取为 DataURL，然后赋值给img的src，就大功告成啦。
DataURL有其固定的格式，如下：
data:[文件格式];base64,[文本流base64编码]。
