百度插件webuploader的坑！

Posted 2020-09-07

 

前言：

自因为项目中需要使用上传插件，所以之前找了几款上传插件。但是呢，小的上传插件是不支持我们项目上传的(做虚拟机项目的，一个镜像可能好几个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我就看文档上有，就不知道怎么用！有知道的大神，可以留言！

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

意会就行！！！轻喷！！！

 

3. 被隐藏的控件，实例化不会成功！

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

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

 

4. 文件选择的时候，代码有问题！

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

场景:

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

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

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

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

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