基於php大文件分片上傳至七牛雲，使用的是七牛雲js-sdk V2版本，引入js文件，配置簡單，可以暫停，暫停後支持斷點續傳（刷新、關閉頁面、重新上傳、網路中斷等情況），可以配置分片大小和分片數量，官方文檔https://developer.qiniu.com/kodo/6889/javascrip ...
基於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; }
——現在的努力，只為小時候吹過的牛逼！ ——
