qiniu4js

qiniu4js现在多是七牛JavaScript浏览器文件上传的最好完成。

运用TypeScript编写，不依赖任何三方库，纯代码不包含任何界面元素，运用HTML5 文件API上传(现在和将来不会支撑HTML4以及FLASH)。

支撑UMD模块导入。

已完成

• [x] 文件直传

• [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
    .domain("http://img.yourdomain.com")//默许为http://upload.qiniu.com
    .retry(0)//设置重传次数，默许0，不重传
    .size(1024*1024)//分片大小，最多为4MB,单元为字节,默许1MB
    .chunk(true)//是不是分块上传，默许true，当chunk=true而且文件大于4MB才会举行分块上传
    .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.9 (2016-10-21)

  • 分块上传，自定义上传域名

• 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