因前端页面开发使用的为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
以上是我的一次爬坑之旅,希望能够帮助到大家,欢迎同学们补充和提问

记一次项目使用webuploader爬坑之旅的更多相关文章

  1. SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册

    SSM 项目从搭建爬坑到 CentOS 服务器部署 - 速查手册 提示: (1)CSDN 博客左边有操作工具条上有文章目录 (2)SSM 指 Spring,Spring MVC,MyBatis Mav ...

  2. 记一次SpringBoot使用WebUploader的坑

    问题: B/S通常都会涉及到文件的上传,普通文件上传使用文件框,后台接收文件即可 我遇到的问题是要开发一个大文件上传的功能,那就肯定要支持文件的分片 分析: 1.参考网上的资料后,通常的多文件和大文件 ...

  3. vue : history模式与项目部署的爬坑

    需求:url不能有#符号,且不放在服务器虚拟主机的根目录. 假设放在虚拟主机的 medicine 文件夹下. 需要改两个文件,一个是 ./config/index.js (vue设置文件) ,另一个是 ...

  4. SpringBoot + SpringCloud的爬坑之旅

    1,application.yaml中配置没有生效问题解决 如果配置文件确认没有错误但是没有生效首先是要到编译目录去查看是否被编译过去了,如果没有,请先将项目clean在重启 但是idea启动项目时也 ...

  5. Android爬坑之旅:软键盘挡住输入框问题的终极解决方案

    前言 开发做得久了,总免不了会遇到各种坑.而在Android开发的路上,『软键盘挡住了输入框』这个坑,可谓是一个旷日持久的巨坑--来来来,我们慢慢看. 入门篇 Base 最基本的情况,如图所示:在页面 ...

  6. 【转】Android M(6.0) 权限爬坑之旅

    原文网址:https://yanlu.me/android-m6-0-permission-chasm/ 有一篇全面介绍Android M 运行时权限文章写的非常全面:Android M 新的运行时权 ...

  7. Android M(6.0) 权限爬坑之旅

    坑一:用Android5.0编译的apk,在Android6.0上运行完全没有问题. 在Android6.0以上才需要在运行时请求权限,在旧Android版本上保留原有逻辑,安装时授予权限. 用旧版本 ...

  8. 【转】VUE 爬坑之旅-- 如何对公共JS,CSS进行统一管理,全局调用

    原文:https://blog.csdn.net/zgh0711/article/details/78664262 vue 中,将页面分为了各个组件,我们写好组件,就可以将这个组件运用到其他各个页面中 ...

  9. dotNet程序员的Java爬坑之旅(三)之spring MVC篇一

    使用maven構建springMVC項目,開發工具為IDEA 一.構建Maven項目,模板為WebApp 二.在pom文件中配置SpringMvc配置(springMvc需要以來servlet ,如本 ...

随机推荐

  1. webserive学习记录1-jdk自带webservice

    最近在看webservice有视频,想年后找工作时增加点资本,视频终于看完了,自己又增加了些东西,现在就把视频中学到的和自己发现的东西总结一下. java jdk中自带一个轻量级的webservice ...

  2. 淘宝开源系统监控工具Tsar

    Tsar是淘宝开发的一个非常好用的系统监控工具,在淘宝内部大量使用    它不仅可以监控CPU.IO.内存.TCP等系统状态,也可以监控Apache,Nginx/Tengine,Squid等服务器状态 ...

  3. 文件和Variant的转换

    function FileToVariant(FileName: String): OleVariant; var   AStream: TFileStream;   MyBuffer: Pointe ...

  4. HDFS 好的文章链接

    http://www.cnblogs.com/linuxprobe/p/5594431.html http://www.daniubiji.cn/archives/596 http://blog.cs ...

  5. -moz 火狐 -msIE -webkit[chrome safari]

    -moz代表firefox浏览器私有属性 -ms代表IE浏览器私有属性 -webkit代表chrome.safari私有属性

  6. 最短路径Dijkstra算法(邻接矩阵)

    Dijkstra算法的原理: 从某个源点到其余各顶点的最短路径,即单源点最短路径(仅适合非负权值图).单源点最短路径是指:给定带权有向图G和源点v,求从v到G中其余各顶点的最短路径.迪杰斯特拉(Dij ...

  7. 72. Edit Distance (String; DP)

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  8. Java注解(Annotation)用法:利用注解和反射机制指定列名导出数据库数据

    闲来没事,想了一个应用的例子:用java如何把数据库的数据根据我们指定的某几列,如第2列,第4列,第6列导出来到Excel里? 写代码也是为了应用的,写好的代码更重要的是在于思考.我自己思考了这个示例 ...

  9. VS Access DataSet 插入

    在使用vs2008+access数据库,然后又使用了数据集,这时候插入操作遇到了问题,各种乱七八糟.各种头疼的问题就不说了,现在说找到的解决方法: 在xsd文件中插入TableAdapter后,会自动 ...

  10. [leetcode]680. Valid Palindrome II有效回文II(可至多删一原字符)

    Given a non-empty string s, you may delete at most one character. Judge whether you can make it a pa ...