ngx-webuploader
Angular for Baidu WebUploader
Demo
特性
- 懒加载 webuploader.js 文件。
- 使用 WebUploader 实例对象直接访问,这样无须过度额外的学习成本。
- 支持 Hook。
使用
1、安装
npm install ngx-webuploader --save
把 WebUploaderModule
模块导入到你项目中。
;
2、使用
选择文件 开始上传
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
options | Options | 配置信息,细节见官网 | |
loadingTip | string | 加载中... | 初始化提示文本。 |
onReady | Function | WebUploader.create 调用成功后会触发该事件,并会传递 WebUploaderComponent 当前实例对象,用于后续操作。 |
|
onDestroy | Function | 组件销毁后会触发该事件 |
;; // 注意:声明$有效declare ;
不建议使用 @ViewChild
来获取 WebUploaderComponent
组件实例,原因是当遇到 *ngIf
切换时会倒置实例对象丢失。因此,最靠谱的是使用 onReady
回传的组件实例来访问 WebUpload
实例对象(uploader.Instance)。
3、关于懒加载
懒加载在未到 wdinow.WebUploader
时会启动,如果你在 index.html
已经使用 <script src="webuploader.js"></script>
加载过,懒加载流程将会失效。
4、依赖库(jQuery&Zepto)
WebUploader依赖第三方类库(jQuery或Zepto),所以这里只能引用如果项目中已经有这二者之一就无法指定。
Zepto 默认官网下载是不包括 deferred callbacks,可以通过 http://github.e-sites.nl/zeptobuilder/ 构建一个版本。
5、Hook
hook的注册会倒置所有实例都有效(当然也可以在组件的 options
设置 disableWidgets
来禁用哪些Hook),因此注册最好方式是在 WebUploaderModule.forRoot()
中进行,而且这个注册只会生效一次。
虽然返回的是 Promise 但在定义注册过程中还是不要操作Http之类的,因为这样可能无法保证注册顺序!
WebUploaderModule.forRootWebUploaderConfig
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
License
The MIT License (see the LICENSE file for the full text)