基于php大檔案分片上傳至七牛云，支持斷點續傳，,帶進度條-有解無憂

基于php大檔案分片上傳至七牛云，使用的是七牛云js-sdk V2版本，引入js檔案，配置簡單，可以暫停，暫停后支持斷點續傳（重繪、關閉頁面、重新上傳、網路中斷等情況），可以配置分片大小和分片數量，官方檔案https://developer.qiniu.com/kodo/6889/javascript-sdk-historical-document-2-x，token需要從后端獲取，如果不使用七牛云可參看基于php+webuploader的大檔案分片上傳，帶進度條

前端

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>分片上傳七牛云</title>
</head>
<body>
    <form method="post" enctype="multipart/form-data">

        <br/>
        <!-- 選擇檔案按鈕 -->
        <input id="input-file" class="upload" type="file" value="" onchange="upFile(this)">
         <br/><br/>

        <!-- 進度條 -->
         <div id="totalBar" style="float:left;width:20%;height:20px;border:1px solid;border-radius:3px">
            <div id="totalBarColor" style="width:0%;border:0;background:#00b7ee; color: #FFF;height:20px;"></div>
            <span class="speed"></span>
         </div>
 
         <br/>
         <BR/>
         檔案名：<input type="text" name="key">
         <br/>
         <BR/>
      <input type="button" value="上傳" onclick="upload()"/>
      <input type="button" value="暫停" onclick="filepause()"/>
    </form>
    <!-- 引入js -->
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/qiniu.min.js"></script>
 
    <script>
        var subObject;
       var file;
       //定義上傳配置  大于 4M 時可分塊上傳，小于 4M 時直傳
       var config = {
            useCdnDomain: true,     //是否使用 cdn 加速域名
            region: qiniu.region.z1,    //上傳域名區域 華東空間z0,華南z2，華北z1
            retryCount: 6,      //上傳自動重試次數  默認3次
        };

       //定義putExtra上傳限制
       var putExtra = {
            fname: "",  //檔案原始檔案名
            params: { 'x:flag': 'qiniu'},    //自定義變數
            // mimeType: ["mp4"]     //指定所傳的檔案型別
        };

        var compareChunks = [];
        var observable;
        var subscription;

        function upFile(node) {
            var fileURL = "";
            try{
                file = null;
                if(node.files && node.files[0] ){
                    file = node.files[0];
                }else if(node.files && node.files.item(0)) {
                    file = node.files.item(0);
                }
            }catch(e){

            }
            creatFile(fileURL,file.name);
            return fileURL;
        }

        // 檔案名
        function creatFile(fileURL,fileName){
            $("input[name=key]").val(fileName);
            $("#totalBarColor").css("width","0%");
        }

        // 上傳操作
      function upload() {
            // 設定next,error,complete對應的操作，分別處理相應的進度資訊，錯誤資訊，以及完成后的操作
            subObject = {
                  next: next,
                  error: error,
                  complete: complete
            };
            token = "**************";　　//需要從后端獲取
            //上傳
            observable = qiniu.upload(file, file.name, token, putExtra, config);
            // 呼叫sdk上傳介面獲得相應的observable，控制上傳和暫停
            subscription = observable.subscribe(subObject);
        }

        // 暫停操作
        function filepause(){
           subscription.unsubscribe();
        }

        //分片上傳回傳response，標記上傳進度  
        var next = function(response) {
           var chunks = response.chunks||[];
           var total = response.total;
           $(".speed").text("進度：" + Math.floor(total.percent) + "% ");  //進度向下取整
           $("#totalBarColor").css("width", total.percent + "%");
           compareChunks = chunks;
         };
        // 錯誤資訊
         var error = function(err) {
               alert(err.message);
         };
         // 上傳完成
         var complete = function(res) {
            // 回傳檔案資訊
             console.log(res);
             console.log(res.key);

         };
    </script>
</body>
 
</html>

后端：獲取token

use Qiniu\Auth as Auth;
use Qiniu\Storage\BucketManager;
use Qiniu\Storage\UploadManager;

function getToken()
{
  vendor('qiniu.autoload');
  $accessKey = '***';
  $secretKey = '***';
  $bucket = '***';

  $expires = 7200;

  // 構建鑒權物件
  $auth = new Auth($accessKey, $secretKey);

  $token = $auth->uploadToken($bucket,null,$expires, null, true);
  return $token;
}

——現在的努力，只為小時候吹過的牛逼！ ——

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/542930.html

標籤：其他

上一篇：基于php+webuploader的大檔案分片上傳，支持斷點續傳，帶進度條

下一篇：【驗證碼逆向專欄】某驗“初代”滑塊驗證碼逆向分析