AngularQiniuCloud 是一个基于 Angular.js 框架的上传七牛云存储的解决方案。它依赖Angular.js、七牛云存储的 JS SDK 和 Plupload。
安装
使用 npm 进行安装：
npm install angular-qiniu-cloud --save
如何使用
- 添加依赖
angular.module('myApp', ['angular-qiniu-cloud']);- 在 HTML 中添加上传文件的 input 标签
<input id="upload" type="file" pl-options="{runtimes: 'html5,flash', browse_button: 'pickfiles', filters:{mime_types: [{title: 'Image files', extensions: 'jpg,gif,png'}]}, chunk_size:'1mb'}" pl-uploader="uploader" multiple />- 绑定上传事件
angular.module('myApp').controller('myController', function($scope){
$scope.uploader.onSuccess = function(file, response) {
console.log('onSuccess', file, response);
}
})常用 API
uploader公开了plupload的API，可以根据官方文档自行使用，这里仅介绍常用的几个 API 使用方法。
- uploader.start() 开始上传
- uploader.removeFile(file) 移除文件
- uploader.stop() 停止上传
- uploader.onSuccess(file, response) 成功上传回调函数，返回上传成功的文件和响应数据
- uploader.onError(file, errorCode, message) 失败回调函数，返回上传失败的文件，错误代码和消息
示例代码
<input id="upload" type="file" pl-options="{runtimes: 'html5,flash', browse_button: 'pickfiles', filters:{mime_types: [{title: 'Image files', extensions: 'jpg,gif,png'}]}, chunk_size:'1mb'}" pl-uploader="uploader" multiple />
<button ng-click="uploader.start()">开始上传</button>
<button ng-click="uploader.stop()">停止上传</button>
<div ng-repeat="file in uploader.files">
{{ file.name }} <button ng-click="uploader.removeFile(file)">删除</button>
</div>-- -------------------- ---- -------
-------------------------------------------------- -----------------
--------------- - --- -------------------
--------- --------------
-------------- ------------
---- ----------------------------
-------- -
----------- -
------- ------ ------- ----------- ---------------
-
--
----------- ------
----- -
--------- ---------- ---
------------- ------------ ----- ---
--------------- ------------ ----- ---
------------- ------------ ----- ----- ---
------ ------------ ---- --
-
---
-----------------------
------------------------- - -------------- --------- -
------------------------ ----- ----------
-
--总结
AngularQiniuCloud 是一个简单方便的上传七牛云存储的解决方法。通过学习本文，您已经掌握了 AngularQiniuCloud 的基本使用方法和常用 API，希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601e81e8991b448de499