七牛浏览器 js sdk

[xlsepiphone]

lsxiao/qiniu4js

七牛 JavaScript 浏览器文件上传 js sdk.

使用 TypeScript 编写，不依赖任何三方库，纯代码不包含任何界面元素，使用 HTML5 文件 API 上传(目前和未来不会支持 HTML4 以及 FLASH)。

支持 UMD 模块导入。

已完成

• [x] 文件直传
• [x] 多文件上传
• [x] token 共享
• [x] 自动重传
• [x] 任务拦截器
• [x] 文件过滤
• [x] 多实例(可以创建多个上传实例,互不影响)

待完成

• [ ] 分块上传
• [ ] 图片裁剪
• [ ] 图片质量压缩
• [ ] 使用七牛 API 进行图片处理

安装

sudo npm install qiniu4js --save

导入

浏览器

    <script src="qiniu4js.js"></script>

es6

    import {UploaderBuilder} from 'Qiniu'

CommonJS

    {UploaderBuilder} =  require('Qiniu')

使用方法

//构建 uploader 实例
let uploader = new Qiniu.UploaderBuilder()
	.debug(false)//开启 debug ，默认 false
	.retry(0)//设置重传次数，默认 0 ，不重传
	.auto(true)//选中文件后立即上传，默认 true
	.multiple(true)//是否支持多文件选中，默认 true
	.accept(['.gif','.png','video/*'])//过滤文件，默认无，详细配置见 http://www.w3schools.com/tags/att_input_accept.asp
	.tokenShare(true)//在一次上传队列中，是否分享 token,如果为 false 每上传一个文件都需要请求一次 Token ，默认 true
	.tokenFunc(function (setToken,task) {
	    //token 获取函数， token 获取完成后，必须调用`setToken(token);`不然上传任务不会执行。
		setTimeout(function () {
			setToken("token");
		}, 1000);
	})
	//任务拦截器
    .interceptor({
        //拦截任务,返回 true ，任务将会从任务队列中剔除，不会被上传
    	onIntercept: function (task) {
    		return task.file.size > 1024 * 1024;
    	},
    	//中断任务，返回 true ，任务队列将会在这里中断，不会执行上传操作。
    	onInterrupt: function (task) {
    		if (this.onIntercept(task)) {
    			alert("请上传小于 1m 的文件");
    			return true;
    		}
    		else {
    			return false;
    		}
    	},
    }   
    //你可以添加多个任务拦截器
    .interceptor({...})
	.listener({
		onReady(tasks) {
			//选择上传文件确定后,该生命周期函数会被回调。
			
		},onStart(tasks){
			//开始上传
			
		},onTaskGetKey(task){
		    //为每一个上传的文件指定 key,如果不指定则由七牛服务器自行处理
			return "test.png";
			
		},onTaskProgress: function (task) {
		    //每一个任务的上传进度,通过`task.progress`获取
			console.log(task.progress);
			
		},onTaskSuccess(task){
			//一个任务上传成功后回调
			
		},onTaskFail(task) {
        	//一个任务在经历重传后依然失败后回调此函数
        	
        },onTaskRetry(task) {
        	//开始重传
        	
        },onFinish(tasks){
            //所有任务结束后回调，注意，结束不等于都成功，该函数会在所有 HTTP 上传请求响应后回调(包括重传请求)。
            
		}}
	}).build();
	
	
//如果 auto 设置为 false,则需要手动启动上传。
//uploader.start();


//由于安全原因， display:none 的 file input ，无法通过代码调用 click 方法，必须通过如下处理，让用户来实现 click ，从而打开文件选择窗口:

//你可以自行监听 HTML 元素的 click 事件，在回调函数内部打开文件选择窗口。你也可以使用 jQuery 监听，下面使用的是原生的 JavaScript 的方式。
button = document.getElementById('button');
button.addEventListener("click", function () {
	uploader.chooseFile();
}

版本说明

• 0.0.8 (2016-10-19)

  • fix bug,当没有选中任何文件的时候，会触发上传函数。

• 0.0.7 (2016-10-19)

  • 更换上传域名为 upload.qiniu.com

• 0.0.6 (2016-10-19)

  • 绕过缓存，避免每次都上传同样的文件。

• 0.0.5 (2016-10-19)

  • tokenFunc(setToken,task)增加 task 参数

• 0.0.4 (2016-10-19)

  • 修复了一个关于 accept 选项的 bug 。

• 0.0.3 (2016-10-19)

  • 任务拦截器实现。

• 0.0.2 (2016-10-19)

  • 基本功能的实现。

维护人

知乎 : @面条

Github : @lsxiao

开源许可

MIT

[BOYPT]

点赞支持一下，马上用到项目中试试；七牛官方 sdk 的控件在页面元素出现变动时候，会出现选择文件控件覆盖到其他元素的问题，我试试楼主的

[marvinwilliam]

赞一个,建议再加上 https 下上传的支持.

[xlsepiphone]

@BOYPT 今天会完成分块上传的功能，可以再等等。

[BOYPT]

@xlsepiphone 发现编译后的 js 用了这句
this._listener = Object.assign(new SimpleListener(), builder.getListener);

这 Object.assign 是 ES6 特性，在手机浏览器上不支持，应该让编译器输出个 es5 版本的才能更好支持

[BOYPT]

@xlsepiphone
以及一处用了 endsWith ，，也是手机浏览器没有的。。。我暂时手动 hack 了来用，，