怎么封装webuploader

发布网友发布时间：2022-04-07 05:14

共1个回答

热心网友时间：2022-04-07 06:43

兼容IE6+ 以及以HTML5为主的上传组件。它支持分片和并发，也就是大文件可以分割多块并发上传。以及能够重传。
支持多种图片格式的预览和压缩。
支持多途径添加文件，比如拖拽，图片粘贴功能
支持了MD5，能够做文件md5值验证。
源码采用AMD规范，也实现AMD模块机制
查看源码其实可以看到分了几个模块组织代码，包括filepicker validator filepaste等都是可以拿出来单独用的。
所有代码都是在一个内部闭包中，对于暴露了唯一一个变量WebUploader,跟jQuery暴露$ 或 jQuery很类似，都是：return require(‘webuploader’),所以说内部是实现了一个简单的AMD模块机制
当然很多修复IE bug的代码，Android和 IOS的代码
同时它也定义了上传过程中的一系列事件像: fileQueued 、 startUpload 、 stopUpload、uploadFinished 等等，WebUploader帮我们定义了这些事件，我们需要在这些事件的回调函数中撰写我们的业务逻辑。
其实这也是封装的一个原因，把事件处理以及UI基本HTML的模板都封装起来了。
最后就是说一下其实WebUploader也实现了Promise规范。可以在WebUploader中创建Deferred对象来处理异步操作，如下：
// 在文件开始发送前做些异步操作。
// WebUploader会等待此异步操作完成后，开始发送文件。
Uploader.register({
'before-send-file': 'doSomthingAsync'
}, {

doSomthingAsync: function() {
var deferred = Base.Deferred();

// 模拟一次异步操作。
setTimeout(deferred.resolve, 2000);

return deferred.promise();
}