近期做了图片上传,使用百度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只是统计你本次选择图片的张数。