记一次项目使用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;
      }

请先安装Adobe Flash Player,安装后请重启浏览器

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请求,发现七牛返回的响应标头记一次项目使用webuploader爬坑之旅_第1张图片

而另一个响应标头则为

记一次项目使用webuploader爬坑之旅_第2张图片

所以需要在返回错误的服务器上添加crossdomain.xml

5.上传服务器地址IE9不支持https,所以请修改为http


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

你可能感兴趣的:(vue)