关于webuploader图片上传的坑

近期做了图片上传,使用百度FEX团队的webuploader上传组件,具体用法就不做过多说明了,下面说一下我踩过的坑。

官网地址:http://fex.baidu.com/webuploader/

github地址:https://github.com/fex-team/webuploader

1.一个页面上有多个上传入口,这时实例化组件的时候会报错。

解决方案:在实例化组件时,配置pick时,id配置为class名,每个按钮放在不同的id或class名下,这样实例化的是不同的按钮。

2.多张上传时,可以用fileNumLimit配置最多上传张数。但是有一个问题,每次上传不超过这个限制,都可以上传成功。但是我其实想实现的是上传总数不超过这个限制。

原因:每次文件加入队列时,count会加1,但是在上传完成的时候会把count清零。如下:

uploader.on('fileQueued',function() {

       count++;

 });


uploader.on('fileDequeued',function() {

         count--;

 });


uploader.on('reset',function() {

          count=0;

 });

解决方案:

1.把count=0注掉,但是这个方法不靠谱,个中原因自己思考吧

2.设置一个全局变量count来控制这个数量。批量上传图片时,可以从生命周期的执行顺序发现,所有图片先进入队列,排队完毕后才会执行上传。我们可以在beforeFileQueued时,count++,在filesQueued里,我们可以统计出用户一共选择了几个文件,即队列里一共有几个文件,这时可以做一个判断,如果这个count比剩余可上传的张数大,提示用户,count清零,并且用reset把队列清空,否则就执行上传。而且,配置项中的auto参数要设置为false或者不设置,否则会自动上传。

不要以为就到此为止了,还要考虑上传成功和失败的情况,无论是上传成功还是失败,这个任务已经执行过了,就不应该在count计数里,所以要执行count--。这个count只是统计你本次选择图片的张数。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,083评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,925评论 25 709
  • 死亡 是一件很大的事情吗 我想 可能死亡本身并不重要 当新闻在播报某处发生车祸死伤多少的时候 有人在像往常一样排队...
    比目的一条鱼阅读 442评论 0 1
  • 各位亲朋好友: 大家好! 一转眼我在保险行业工作已过20年了。作为市场化程度极高的行业,我们的工作节奏很快,”5+...
    威乐河湾阅读 341评论 0 0
  • 在之前的文章手把手教你在应用里用上iOS机器学习框架Core ML里,我们用苹果的机器学习框架Core ML和事先...
    Cyyyyyyyy阅读 6,211评论 2 15