• 百度插件webuploader的坑!


    前言:

    自因为项目中需要使用上传插件,所以之前找了几款上传插件。但是呢,小的上传插件是不支持我们项目上传的(做虚拟机项目的,一个镜像可能好几个G),所以呢这个插件要支持分片上传,拓展性要高(肯定的啦,不支持分片,玩命啊?)!

    所以呢,我就找到了两款插件:

    1. 百度的Webuploader

    2. 国外的Plupload (这插件真的好用,特此推荐,但是也有点小坑的地方。但相比百度的好一点,其实也是看实际需要!!!)

    重点介绍坑的地方:

    1.webuploader插件在支持h5的浏览器上是使用h5上传的,所以呢在你配置flash路径的时候,即使路径找不到,它特么的也不会报错(隐形的炸弹)!

    所以,在不支持h5的浏览器下,该插件会使用flash来上传的啦!鄙人,目前的一个项目用的是vue.js,真的是好不容易整合进了webuploader!!!之前最早用plupload一直报undefined mox.js!哎,所以只能找百度的这个插件了!

    那下面呢,就来说下flash上传的问题。首先说场景!我们的这个项目是最低支持ie9,于是捏,我们的测试就去测试了下ie9,一测试发现,根本无法选择上传文件!

    我听闻之后,甚是惊讶,禀着程序员的思想:“我写的代码怎么可能有问题?”,我就去调试了!一开始猜测是flash的一个坑!(下面会提到!!!),但是验证之后发现不是的!

    经过百度之后,反现了ie9是支持部分h5的,所以就猜测ie9 <都是使用flash上传的!那行啊,为了验证到底是不是flash的问题呢,我就在自己的代码中增加了一行参数:

    既然,支持强制使用flash,那好嘛!添上这参数之后,在chroem上运行,发现出现了ie9上的问题!这是我就已经确定是flash的问题,也行就是flash路径的问题!然后呢,我就刷新页面,发现呢flash文件一直都没加载,这时候,我就更加坑定了!

    但是,心里也一直的骂这插件,你说你为啥也不报错呢?既然找到原因,那就解决好了!解决之后,后续发现最大的一个坑!

    因为,我们这个项目提交之前,需要文件的name base64加密一下,但是呢在其他的浏览器上发现都没问题,但是唯独在ie9上有问题,乱码!!!心里骂了ie一万遍,其实最后发现不是ie的问题!

    经过抓包发现,在flash上传的时候,name没有base64!!!

    2.  removeFile()根本不是真正的移除,而是改变文件的状态!

    这个大家应该都知道,用过的都说过这个问题!但是呢,都说有个QUENEN我就看文档上有,就不知道怎么用!有知道的大神,可以留言!

     顺带贴下。我是怎么弄的一次上传一个的!顺带再吐槽一点,这插件支持多个的真的好,但是就不能支持一次只上传一个么?有参数设置,其实呢?鸟用!!!

    意会就行!!!轻喷!!!

    2017.4.27 修改!

    这部分,是因为当初刚使用这个插件,不清楚的地方!首先,道歉,错了就承认嘛!但是呢,这玩意的removeFile的确不好使,如果想清楚全部队列的盆友,请使用rest()方法,这个将会整个清楚!

    也就不要使用我的这个方法了,步骤太过繁琐!不过,也算一个解决方法吧!

    3. 被隐藏的控件,实例化不会成功!

    这是我之前就知道的一个坑,所以我跨过去了!那是在2015的冬天,那时候我刚做php没多久!!!哎,改这个Bug改的我真是天昏地暗,不知道咋回事!最后终于发现,特么的是flash的问题!!!

    据说,是flash的坑,然后就延伸到这个插件上了!!!

    4. 文件选择的时候,代码有问题!

    本人js算辣鸡,多多少少看的懂它的意思,就改了下!经测试还是有效的!

    场景:

    就是测试妹子,发了一个无后缀的文件来测试上传的问题,结果发现可以被选中,然后上传!然后妹子,果断提出了BUG。。。

    其实想吐槽,你特么后台不判断啊= =,后台不是PHP写的,使用python那帮哥们写的。。。但是呢,这的确是个BUG

    可能会有人问,file控价不是可以定义上传文件后缀咩?好的,我的回答是:为了兼容性,chrome在52版本上会有一个大BUG,无视任何上传插件,

    就是你定义了过滤的文件类型,但是chrome在选择文件框弹出来的时候有8秒之多,,,所以,我们就又改了下源码中的在file中增加自定义的后缀的js,

    统一在上传部分增加一行,哪些可以上传。。。。总之,就是用js做判断!

  • 相关阅读:
    Oracle OMF 创建数据库
    Oracle 数据库修改数据文件
    oracle 12c 安装文档
    mysql5.7 多次增量备份及恢复测试
    Mysql 数据库模拟误操作基于binlog恢复
    基于scn号恢复oracle数据库测试
    读源码 | metisMenu侧边栏插件
    JavaScript | JQuery插件定义方法
    JavaScript | 模拟文件拖选框样式 v1.0
    JavaScript | JSON基本格式
  • 原文地址:https://www.cnblogs.com/mikusnail/p/Webuploader.html
Copyright © 2020-2023  润新知