更好用的七牛雲存儲 JS SDK，由於官方的太難用

時間 2019-11-09

標籤更好用的七牛 7牛存儲 sdk 由於官方太難欄目 JavaScript 简体版

原文原文鏈接

qiniu4js

qiniu4js目前多是七牛JavaScript瀏覽器文件上傳的最好實現。javascript

使用TypeScript編寫，不依賴任何三方庫，純代碼不包含任何界面元素，使用HTML5 文件API上傳(目前和將來不會支持HTML4以及FLASH)。html

支持UMD模塊導入。java

已完成

[x] 文件直傳git
[x] 分塊上傳es6
[x] 多文件上傳github
[x] token共享npm
[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();
}