因前端页面开发使用的为VUE开发，又要支持IE9，遂只有基于webuploader封装一个上传组件。地址：http://c7.gg/fvcSt，现在版本比项目中的组件版本要低，后期会更新npm版本。
webuploader使用html上传，如果低版本就是用flash上传，上传原理就不一一描述了，感兴趣的同学可以到webuploader官网查看。
使用html上传，如谷歌，IE11等基本上并没有什么问题，但是IE9使用flash上传的时候，遇到了一些坑：
1.严格模式下Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
原因：严格模式下不支持callee
修改：
把webupload.js中的var fn = arguments.callee这段改成：
var changeFn = (function even(that, e){
var clone;
me.files = e.target.files;
// reset input
clone = that.cloneNode( true );
clone.value = null;
that.parentNode.replaceChild( clone, that );
input.off();
input = $(clone).on('change', function(e){
even(this, e);
}).on('mouseenter mouseleave', mouseHandler);
owner.trigger('change');
});
input.on('change', function(e){
changeFn(this, e);
});
2.Runtime Error
原因：没安装flash或者flash版本过低（提示并不友好）
修改：在封装类中判断
const flashVersion = (function () {
let version;
try {
version = navigator.plugins['Shockwave Flash'];
version = version.description;
} catch (ex) {
try {
version = new window.ActiveXObject('ShockwaveFlash.ShockwaveFlash').GetVariable('$version');
} catch (ex2) {
version = '0.0';
}
}
version = version.match(/\d+/g);
return parseFloat(`${version[0]}.${version[1]}`, 10);
}());
// 判断是否WebUploader支持的Flash
if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie < 10) {
if (!flashVersion || (flashVersion < 11.5)) {
// 没有安装flash player 或版本小
this.showDownload = true;
this.$emit('noflashplayer', this.showDownload);
}
return;
}
<p class="hw-upload_tip" ref="uploader" v-if="showDownload">
<a class="hw-upload_link" :href="downloadFlashUrl" target="_blank">
<slot>请先安装Adobe Flash Player，安装后请重启浏览器</slot>
</a>
</p>
downloadFlashUrl: {
type: String,
default: 'https://www.flash.cn/',
},
3.点击上传按钮无反应
原因：这种情况造成的原因分为以下几点
3.1：SWF文件未加载，原来封装页面使用的是相对路径，但作为组件使用到其他项目中的时候会找不到swf文件，所以需要改成绝对路径，并把swf文件放在了对应项目consumer的resources下。但另一个项目使用时已经加载了swf文件也点击无反应，渲染出的Object位置也没问题，后经排查，是构建过程中，项目中的swf发生了损坏。
3.2: 如果一开始上传按钮被设置display:none隐藏或者受其他样式影响，那么渲染出的Object和上层div位置对不上，导致点击无效
那么你需要调用webuploader的refresh方法，我是在页面渲染完毕后调用，vue中渲染完毕事件是nextTick
this.$nextTick(function () {
});
4.IE9上传会先发送一个options请求crossdomain.xml，然后才回发送上传的POST请求，所以需要服务器支持跨域设置。我是上传到CDN服务器，上传到七牛是没问题的，后来项目上传到另一个内网服务器，只发送了一个options请求就没有继续了，返回也是状态200。分别查看两个服务器的options请求，发现七牛返回的响应标头
而另一个响应标头则为
所以需要在返回错误的服务器上添加crossdomain.xml
5.上传服务器地址IE9不支持https，所以请修改为http
以上是我的一次爬坑之旅，希望能够帮助到大家，欢迎同学们补充和提问