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

   因前端页面开发使用的为VUE开发，又要支持IE9，遂只有基于webuploader封装一个上传组件。地址：https://github.com/z719725611/vue-upload-web，现在版本比项目中的组件版本要低，后期会更新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

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