记一次项目使用webuploader爬坑之旅

因前端页面开发使用的为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

以上是我的一次爬坑之旅，希望能够帮助到大家，欢迎同学们补充和提问