近期接到的新需求：上傳大文件，因文件上傳的大小不定，所以需要切片上傳
前端代碼：

import md5 from "js-md5";/*** 緩存轉換 導入大文件* @param {*} that this* @param {*} file 上傳文件的對象* @param {*} size 每次上傳文件的限制大小* @param {*} progress 上傳文件的進度條* @param {*} url string 上傳文件的url* @param {*} module_name string 上傳文件的需要上文的文件名*/ export function uploadFile(that, file, size, progress, url, module_name) {let xhr = new XMLHttpRequest();let form_data = new FormData();let start = 0;let end = start + that.size;let blob;let blob_num = 1;blob = cutFile(file);sendFile(blob, file);blob_num += 1;//切割文件function cutFile(file) {let file_blob = file.slice(start, end);start = end;end = start + that.size;return file_blob;};//發送文件function sendFile(blob, file) {let total_blob_num = Math.ceil(file.size / size);form_data = new FormData();form_data.append('file', blob);form_data.append('blob_num', blob_num);form_data.append('total_blob_num', total_blob_num);form_data.append('file_name', file.name);form_data.append('module_name', module_name);form_data.append('code', md5(md5(file.name + global.ENCRYPTION_KEY)));xhr.open("POST", global.IMG_URL + url, false);xhr.onreadystatechange = function () {if (total_blob_num == 1) {that.progress = 100;} else {that.progress = Math.min(100, (blob_num / total_blob_num) * 100);}if (JSON.parse(xhr.response).code == 0) {that.file_name = '';that.$Message.error('上傳錯誤');return false} else if (JSON.parse(xhr.response).code == 2) {that.$Message.success('上傳成功');that.file_path = JSON.parse(xhr.response).file_path;return false}let t = setTimeout(function () {if (start < file.size) {blob = cutFile(file);sendFile(blob, file);blob_num += 1;} else {clearTimeout(t);}}, 1000);}xhr.send(form_data);} }

后端代碼：我們后端是用PHP完成的

<?phpif (!defined('BASEPATH')) exit('No direct script access allowed'); header('Content-Type:text/html;charset=utf-8');header('Access-Control-Allow-Origin:*');class chunkupload extends CI_Controller {private $filepath; // 上傳目錄private $tmpPath; // PHP文件上傳臨時目錄private $blobNum; // 當前第幾個文件塊private $totalBlobNum; // 文件塊總數private $fileName; // 原文件名private $finalFileName; // 經過處理的最終文件名public function __construct(){parent::__construct();}// 大文件分片上傳public function bigFileUpload(){if (empty($_POST['code'])) {echo_json(0,'code不能為空');}if (empty($_POST['module_name'])) {echo_json(0,'上傳目錄不能為空');}if (empty($_POST['blob_num'])) {echo_json(0,'當前片數不能為空');}if (empty($_POST['file_name'])) {echo_json(0,'文件名不能為空');}if (empty($_POST['total_blob_num'])) {echo_json(0,'總片數不能為空');}if (empty($_FILES['file'])) {echo_json('file為空');}if (empty($_FILES['file']['tmp_name'])) {echo_json(0,'tmp_name為空');}$fileDir = './uploads/'.trim($_POST['module_name'],'/').'/' . date('Y/m/d');$this->filepath = $fileDir;$this->tmpPath = $_FILES['file']['tmp_name'];$this->blobNum = $_POST['blob_num'];$this->totalBlobNum = $_POST['total_blob_num'];$this->fileName = $_POST['file_name'];// 校驗$this->validate($_POST['code'], $_POST['file_name']);// 移動文件$this->moveFile();// 合并分塊的文件$this->fileMerge();// 響應狀態$this->apiReturn();}// 判斷是否是最后一塊，如果是則進行文件合成并且刪除文件塊private function fileMerge(){if($this->blobNum == $this->totalBlobNum){$blob = '';for($i=1; $i<= $this->totalBlobNum; $i++){$blob .= file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);}$ext = '.'.substr(strrchr($this->fileName, '.'), 1);$this->finalFileName = date('YmdHis') . rand('10000', '99999') . $ext;file_put_contents($this->filepath.'/'. $this->finalFileName,$blob);$this->deleteFileBlob();}}// 刪除文件塊private function deleteFileBlob(){for($i=1; $i<= $this->totalBlobNum; $i++){@unlink($this->filepath.'/'. $this->fileName.'__'.$i);}}// 移動文件private function moveFile(){$this->touchDir();$filename = $this->filepath.'/'. $this->fileName.'__'.$this->blobNum;move_uploaded_file($this->tmpPath,$filename);}// API返回數據public function apiReturn(){header('Content-type: application/json');if($this->blobNum == $this->totalBlobNum){if(file_exists($this->filepath.'/'. $this->finalFileName)){$data['code'] = 2;$data['msg'] = 'success';$data['file_path'] = ltrim($this->filepath,'./').'/'. $this->finalFileName;echo json_encode($data);exit;}}else{if(file_exists($this->filepath.'/'. $this->fileName.'__'.$this->blobNum)){$data['code'] = 1;$data['msg'] = '上傳中，共:'.$this->totalBlobNum.'塊，當前第'.$this->blobNum.'塊....';$data['file_path'] = '';echo json_encode($data);exit;}}}// 建立上傳文件夾private function touchDir(){if(!file_exists($this->filepath)){return mkdir($this->filepath, 0777, true);}}// 參數校驗private function validate($code,$fileName){if (md5(md5($fileName.config_item('encryption_key'))) != $code) {echo_json(0,'參數校驗失敗');}} }function echo_json($code = 0, $msg = '', $data = array()) {$arr = array('code' => $code,'msg' => $msg,'data' => $data);echo json_encode($arr);exit; }

?

轉載于:https://www.cnblogs.com/mxyr/p/10343039.html

總結

以上是生活随笔為你收集整理的大文件切片功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。