关于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只是统计你本次选择图片的张数。