首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
xlsepiphone
V2EX  ›  JavaScript

七牛浏览器 js sdk

  •  
  •   xlsepiphone · 2016-10-20 00:43:10 +08:00 · 1684 次点击
    这是一个创建于 1187 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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)

    • 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

    5 回复  |  直到 2016-10-20 13:46:11 +08:00
    BOYPT
        1
    BOYPT   2016-10-20 10:10:11 +08:00
    点赞支持一下,马上用到项目中试试;七牛官方 sdk 的控件在页面元素出现变动时候,会出现选择文件控件覆盖到其他元素的问题,我试试楼主的
    marvinwilliam
        2
    marvinwilliam   2016-10-20 10:17:00 +08:00
    赞一个,建议再加上 https 下上传的支持.
    xlsepiphone
        3
    xlsepiphone   2016-10-20 10:19:23 +08:00
    @BOYPT 今天会完成分块上传的功能,可以再等等。
    BOYPT
        4
    BOYPT   2016-10-20 11:44:13 +08:00
    @xlsepiphone 发现编译后的 js 用了这句
    this._listener = Object.assign(new SimpleListener(), builder.getListener);

    这 Object.assign 是 ES6 特性,在手机浏览器上不支持,应该让编译器输出个 es5 版本的才能更好支持
    BOYPT
        5
    BOYPT   2016-10-20 13:46:11 +08:00
    @xlsepiphone
    以及一处用了 endsWith ,,也是手机浏览器没有的。。。我暂时手动 hack 了来用,,
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1201 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 26ms · UTC 18:20 · PVG 02:20 · LAX 10:20 · JFK 13:20
    ♥ Do have faith in what you're doing.