• php eayswoole node axios crypto-js 实现大文件分片上传复盘

    不啰嗦  直接上步骤

    步骤1.开发环境配置

    项目需要node.js 做前端支撑    官网下载地址：

    http://nodejs.cn/download/

    根据自己需要下载对应的版本,我下载的是windows系统64位的版本。

    包下载好后  进行安装，安装步骤在此省略...

    测试是否安装成功

    如果是window  按住键盘Win+R    输入cmd   在终端里面输入

    1. node -v
    2.  
    3. npm-v

    如果安装成功会出现安装的node   npm   的软件版本号，否则为安装失败。如下图

    因为一些原因 npm 下载包巨慢    你懂得，所以我们这里选用淘宝镜像  打开终端   运行如下命令：

    npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装好后  运行命令：

    1. cnpm -v
    2. cnpm@9.2.0 (C:\Users\King\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
    3. npm@9.8.1 (C:\Users\King\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\index.js)
    4. node@18.17.0 (D:\Program Files\node\node.exe)
    5. npminstall@7.11.1 (C:\Users\King\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
    6. prefix=C:\Users\King\AppData\Roaming\npm
    7. win32 x64 10.0.22621
    8. registry=https://registry.npmmirror.com

    步骤2.构想分片上传逻辑，编写逻辑代码（核心）

    基本思路：

    1）前端侧  ：前端上传文件，根据分片大小，自动计算出整个文件的分片数量，以及分片二进制文件，以及整个文件的md5值，以及分片文件md5值，传与后端，后端处理完后，根据上传分片的进度以及后端返回状态，判断整个文件是否传输完毕，完毕后，前端展示完成进度。结束整个分片上传逻辑。

    2）后端PHP侧：后端接收前端传过来的数据，包括文件名，文件md5，分片信息，然后将分片文件信息存储到redis  有序集合中，其中key为整个文件的md5 ,待所有分片文件都上传完后，根据顺序，然后将文件整合存储，然后完成整个文件分片上传逻辑。

    下面我们来编写相关代码 ：

    前置条件  我们已经安装了此环境   环境如下：

    运行环境版本
    Linuxcentos  7.7.1908
    PHP 7.4.19
    redis6.2.1
    swoole扩展4.8.13
    eayswoole3.5.1

     首先我们需要使用到redis  部分代码如下：

    首先配置redis 相关信息  此处我们将配置文件放在根目录下Config 目录 Redis.php中  代码如下：

    1. [root@web1 easyswoole]# cd Config
    2. ll
    3. [root@web1 Config]# ll
    4. 总用量 28
    5. -rw-r--r-- 1 root root 8725 9月  23 19:09 Common.php
    6. -rw-r--r-- 1 root root 1450 9月   4 21:21 Iam.php
    7. -rw-r--r-- 1 root root 3027 8月  29 18:47 Mimes.php
    8. -rw-r--r-- 1 root root 1795 9月   4 19:21 Mysql.php
    9. -rw-r--r-- 1 root root  948 9月  23 17:50 Redis.php
    10. [root@web1 Config]# vim Redis.php
    11.  
    12.  
    14. return [
    15.     'redis' => [
    16.         # 默认redis 配置
    17.         'REDIS' => [
    18.             'host' => '127.0.0.1',
    19.             'port' => '6390',
    20.             'auth' => '123456',
    21.             'db' => '1',
    22.             'serialize' => 0
    23.         ],
    24.  
    25.         # token存储redis,用来设置接口权限
    26.         'REDIS_LOCAL' => [
    27.             'host' => '127.0.0.1',
    28.             'port' => '6390',
    29.             'auth' => '123456',
    30.             'db' => 5,
    31.             'serialize' => 0
    32.         ],
    33.  
    34.     ]
    35. ];

    配置上传目录  后续Upload.php 控制器需要读取  Config/Common.php 代码如下：

    2. use EasySwoole\EasySwoole\Config;
    3. defined('BASEPATH') or define('BASEPATH', dirname(__FILE__) . '/../..');
    4. defined('WEB_IP') or define('WEB_IP', '192.168.1.1');
    5. return [
    6.      // 此处省略其他配置信息 .....
    7.     'WEB_IP' => WEB_IP,
    8.     'WEB_PATH' => BASEPATH,
    9.     
    10.     'UPLOAD' => [
    11.         'tmp_dir' => '/uploads_tmp/',//分片文件缓存目录
    12.         'upload_dir' => '/uploads/',//文件现在目录
    13.      ],
    14.       
    15.     // 此处省略其他配置信息 .....
    16. ];

    接下来需要定义连接池  直接上代码   

    1. cd App/Pool 
    2. touch RedisPool.php
    2. /**
    3.  * redis连接池配置处理
    4.  */
    5.  
    6. namespace App\Pool;
    7.  
    8.  
    9. use EasySwoole\Pool\Config;
    10. use EasySwoole\Redis\Config\RedisConfig;
    11. use EasySwoole\Redis\Redis;
    12.  
    13. class RedisPool extends \EasySwoole\Pool\AbstractPool {
    14.  
    15.     protected $redis_config;
    16.  
    17.     public function __construct(Config $conf, RedisConfig $redis_config) {
    18.         parent::__construct($conf);
    19.         $this->redis_config = $redis_config;
    20.     }
    21.  
    22.     protected function createObject() {
    23.         return new Redis($this->redis_config);
    24.     }
    25. }

    接下来，在入口文件EasySwooleEvent.php 注册redis 连接池

    2.  
    3. namespace EasySwoole\EasySwoole;
    4. use App\Pool\RedisPool;
    5. use EasySwoole\Redis\Config\RedisConfig;
    6.  
    7. class EasySwooleEvent implements Event {
    8.  
    9.     public static function mainServerCreate(EventRegister $register) {
    10.         //其他逻辑 此处省略....
    11.         
    12.         //注册redis 
    13.         self::initRedis();
    14.         
    15.         //连接池热启动
    16.         $register->add($register::onWorkerStart, function (\swoole_server $server, int $workerId) {
    17.             if ($server->taskworker == false) {
    18.                 //每个worker进程都预创建连接
    19.                 $redis_arr = Config::getInstance()->getConf('redis');
    20.                 foreach ($redis_arr as $redis_name => $redis_conf) {
    21.                     \EasySwoole\Pool\Manager::getInstance()->get(strtolower($redis_name))->keepMin(10);
    22.                     //print_r(\EasySwoole\Pool\Manager::getInstance()->get(strtolower($redis_name))->status());
    23.                 }
    24.  
    25.           
    26.  
    27.             }
    28.         });
    29.         //其他逻辑 此处省略....
    30.     }
    31.  
    32.     /**
    33.      * 注册redis连接池
    34.      */
    35.     public static function initRedis() {
    36.  
    37.         // 注册redis连接池
    38.         $redis_arr = Config::getInstance()->getConf('redis');
    39.         foreach ($redis_arr as $redis_name => $conf) {
    40.             $config = new \EasySwoole\Pool\Config();
    41.             $config->setMinObjectNum(8);
    42.             $config->setMaxObjectNum(200);
    43.             $config->setGetObjectTimeout(3.0);
    44.             $redis_config = new RedisConfig($conf);
    45.             //注册连接池管理对象
    46.             \EasySwoole\Pool\Manager::getInstance()->register(new RedisPool($config, $redis_config), strtolower($redis_name));
    47.         }
    48.  
    49.     }
    50. }

     接下来  新增相关路由信息

    2. /*
    3.  * 路由
    4.  */
    5. namespace App\HttpController;
    6.  
    7. use EasySwoole\EasySwoole\Config;
    8. use EasySwoole\Http\AbstractInterface\AbstractRouter;
    9. use EasySwoole\Http\Request;
    10. use EasySwoole\Http\Response;
    11. use FastRoute\RouteCollector;
    12.  
    13. class Router extends AbstractRouter
    14. {
    15.     function initialize(RouteCollector $routeCollector)
    16.     {
    17.         $routeCollector->addGroup('/api/common', function (RouteCollector $router) {
    18.             $router->post('/upload_file', '/Api/Upload/uploadFile'); //分片上传文件
    19.             $router->post('/slice_upload_check', '/Api/Upload/checkFile'); //分片上传文件检测
    20.         });
    21.     }
    22. }

     Upload.php 相关控制器   代码如下：

    2. /**
    3.  * 文件上传（支持分片上传）
    4.  */
    5.  
    6. namespace App\HttpController\Api;
    7. use EasySwoole\Http\AbstractInterface\Controller;
    8. use EasySwoole\EasySwoole\Config;
    9. use EasySwoole\EasySwooleEvent;
    10. use EasySwoole\RedisPool\Redis;
    11. use EasySwoole\Http\Message\Stream;
    12.  
    13. class Upload extends Controller
    14. {
    15.  
    16.     /**
    17.      * Notes: 存储文件到本地
    18.      */
    19.     public function saveFileToLocalAction()
    20.     {
    21.         // $request = $this->request()->getRequestParam();
    22.         $file = $this->request()->getUploadedFile('file');//上传的文件
    23.         if (!$file) {
    24.             return $this->returnMsg( [],50000,'上传出错请重试,请上传文件');
    25.         }
    26.  
    27.         $tmp_file_name = $file->getClientFilename();
    28.  
    29.         $conf = Config::getInstance()->getConf();
    30.         $dir = $conf["WEB_PATH"] . $conf['UPLOAD']['upload_dir'];
    31.         if (!file_exists($dir)) {
    32.             mkdir($dir, 0777);
    33.         }
    34.         $file_ext = uniqid();
    35.         $suf_exp_arr = explode(".", $tmp_file_name);
    36.         $file_name = $suf_exp_arr[0];
    37.         #$move_to = $dir.$tmp_file_name;
    38.         $move_to = $dir . $file_name . '_' . $file_ext . '.' . $suf_exp_arr[count($suf_exp_arr) - 1];
    39.  
    40.         if (file_exists($move_to)) {
    41.             return $this->returnMsg( [],1,'已上传同名文件，请修改后再上传！');
    42.         }
    43.         if (!move_uploaded_file($file->getTempName(), $move_to)) {
    44.             return $this->returnMsg( [],1,'上传失败,请稍后再试！');
    45.         }
    46.         $file_url = "http://" . $conf['WEB_IP'] . $conf['UPLOAD']['upload_dir'] . $file_name . '_' . $file_ext . '.' . $suf_exp_arr[count($suf_exp_arr) - 1];
    47.         $return['file_url'] = $file_url;
    48.         $return['img_url'] = $file_url;
    49.         $return['file_name'] = $file_name . '_' . $file_ext . '.' . $suf_exp_arr[count($suf_exp_arr) - 1];
    50.         return $this->returnMsg($return,0, "success");
    51.     }
    52.  
    53.  
    54.     /***
    55.      * 文件检查
    56.      * @return bool
    57.      */
    58.     public function checkFile()
    59.     {
    60.         $request = $this->request()->getRequestParam();
    61.         $suf_exp_arr = explode(".", $request['file_name']);
    62.         $suf = $suf_exp_arr[count($suf_exp_arr) - 1];
    63.         $can_upload_arr = [
    64.             'zip',
    65.             '3G2',
    66.             '3GP',
    67.             '3GP2',
    68.             '3GPP',
    69.             'AMV',
    70.             'ASF',
    71.             'AVI',
    72.             'BIK',
    73.             'DIVX',
    74.             'DRC',
    75.             'DV',
    76.             'DVR-MS',
    77.             'EVO',
    78.             'F4V',
    79.             'FLV',
    80.             'GVI',
    81.             'GXF',
    82.             'M1V',
    83.             'M2T',
    84.             'M2TS',
    85.             'M2V',
    86.             'M4V',
    87.             'MKV',
    88.             'MOV',
    89.             'MP2V',
    90.             'MP4',
    91.             'MP4V',
    92.             'MPA',
    93.             'MPEG',
    94.             'MPEG1',
    95.             'MPEG2',
    96.             'MPEG4',
    97.             'MPG',
    98.             'MPV2',
    99.             'MTS',
    100.             'MTV',
    101.             'MXF',
    102.             'NSV',
    103.             'NUV',
    104.             'REC',
    105.             'RM',
    106.             'RMVB',
    107.             'RPL',
    108.             'THP',
    109.             'TP',
    110.             'TS',
    111.             'TTS',
    112.             'VOB',
    113.             'VRO',
    114.             'WMV',
    115.             'WTV',
    116.             'XESC',
    117.             'XMP',
    118.             'OGG',
    119.             'SWF',
    120.             'WEBM',
    121.             'GIF',
    122.             '264',
    123.             '601',
    124.             '692',
    125.             '800',
    126.             '801',
    127.             'av',
    128.             'avx',
    129.             'dat',
    130.             'dav',
    131.             'djl',
    132.             'dvr',
    133.             'g64',
    134.             'h3crd',
    135.             'h64',
    136.             'h264',
    137.             'jfv',
    138.             'jmv',
    139.             'kyd',
    140.             'lvf',
    141.             'mpk',
    142.             'nsf',
    143.             'nv4',
    144.             'ps',
    145.             'sdv',
    146.             'sv5',
    147.             'tm4',
    148.         ];
    149.         if (!in_array(strtoupper($suf), $can_upload_arr) && !in_array(strtolower($suf), $can_upload_arr)) {
    150.             return $this->returnMsg([], 30000, '请上传正确格式的文件');
    151.         }
    152.         //判断是否包含特殊字符
    153.         if (strpos($suf_exp_arr[0], ',') !== false) {
    154.             return $this->returnMsg([], 30000, '文件名不能包含英文逗号');
    155.         }
    156.         if (strpos($suf_exp_arr[0], '，') !== false) {
    157.             return $this->returnMsg([], 30000, '文件名不能包含中文逗号');
    158.         }
    159.         $redis_key = $request['file_md5'] ?? '';
    160.         $file_chunk_md5 = $request['file_chunk_md5'] ?? '';
    161.         $status = \EasySwoole\Pool\Manager::getInstance()->get('redis')->invoke(function (\EasySwoole\Redis\Redis $redis) use ($redis_key, $file_chunk_md5) {
    162.             $all_files = $redis->zRange($redis_key, 0, -1);
    163.             if (in_array($file_chunk_md5, $all_files)) {
    164.                 $status = 1;
    165.             } else {
    166.                 $status = 0;
    167.             }
    168.             return $status;
    169.         });
    170.         return $this->returnMsg([], $status);
    171.     }
    172.  
    173.     /***
    174.      * 文件上传
    175.      */
    176.     public function uploadFile()
    177.     {
    178.         $request = $this->request()->getRequestParam();
    179.         $all_chunk = $request['chunks'];//总分片数
    180.         $now_chunk = $request['cur_chunk'];//当前分片
    181.         //$original_filename = $request['original_filename']; //原始文件名
    182.         $file = $this->request()->getUploadedFile('file_chunk');//上传的文件
    183.  
    184.         if (!$file) {
    185.             $json = [
    186.                 'status' => 1,
    187.                 'message' => '上传出错请重试'
    188.             ];
    189.             $this->response()->write(json_encode($json));
    190.             return null;
    191.         }
    192.  
    193.         $conf = Config::getInstance()->getConf();
    194.         $dir = $conf["WEB_PATH"] . $conf['UPLOAD']['upload_dir'];
    195.         $tmp_dir = $conf["WEB_PATH"] . $conf['UPLOAD']['tmp_dir'];//分片数据暂存文件夹
    196.         if (!file_exists($dir)) {
    197.             mkdir($dir, 0777);
    198.         }
    199.         if (!file_exists($tmp_dir)) {
    200.             mkdir($tmp_dir, 0777);
    201.         }
    202.  
    203.         $suf_exp_arr = explode(".", $request['file_name']);
    204.         $suf = $suf_exp_arr[count($suf_exp_arr) - 1];
    205.  
    206.  
    207.         if (move_uploaded_file($file->getTempName(), $tmp_dir . $request['file_chunk_md5'])) {
    208.             //使用redis的有序集合存储文件名称用于合并
    209.             $redis_key = $request['file_md5'];
    210.             $file_status = \EasySwoole\Pool\Manager::getInstance()->get('redis')->invoke(function (\EasySwoole\Redis\Redis $redis) use ($redis_key, $request, $tmp_dir, $dir, $now_chunk, $all_chunk, $suf, $suf_exp_arr) {
    211.                 $redis->expire($redis_key, 7200);  //2小时后过期
    212.                 $redis->zAdd($redis_key, $request['cur_chunk'] + 1, $tmp_dir . $request['file_chunk_md5']);
    213.                 if ($now_chunk == $all_chunk) {
    214.                     //文件合并
    215.                     $all_files = $redis->zRange($redis_key, 0, -1);
    216.                     if ($all_files && is_array($all_files)) {
    217.                         //创建要合并的最终文件资源
    218.                         $final_file = $dir . $request['file_md5'] . '.' . $suf;
    219.                         $final_file_handler = fopen($final_file, 'wb');
    220.  
    221.                         foreach ($all_files as $k => $v) {
    222.                             $frag_file_handler = fopen($v, 'rb');
    223.                             $frag_file_content = fread($frag_file_handler, filesize($v));
    224.                             fwrite($final_file_handler, $frag_file_content);
    225.  
    226.                             unset($frag_file_content);
    227.                             fclose($frag_file_handler);      //关闭分片文件资源
    228.                             unlink($v);     //删除已经合并的分片文件
    229.                         }
    230.                         $redis->zRemRangeByRank($redis_key, 0, -1);
    231.                         $save_path = $dir . "/" . date('Ymd', time());
    232.                         if (!file_exists($save_path)) {
    233.                             mkdir($save_path, 0777);
    234.                         }
    235.                         $new_file = $save_path . '/' . $request['file_md5'] . '.' . $suf;
    236.                         $status = rename($final_file, $new_file);
    237.                         return 'end';
    238.                     }
    239.                 } else {
    240.                     return 'ing';
    241.                 }
    242.             });
    243.  
    244.             if (!in_array($file_status, ['end', 'ing'])) {
    245.                 $json = [
    246.                     'status' => 1,
    247.                     'message' => '上传出错请重试,重命名失败'
    248.                 ];
    249.             } else {
    250.                 $json = [
    251.                     'status' => 0,
    252.                     'message' => 'success',
    253.                     'time' => time(),
    254.                     //'file_url' => "http://" . $conf["WEB_IP"] . $conf['UPLOAD']['upload_dir'] . $request['file_md5'] . '.' . $suf,//文件链接,
    255.                     'file_url' => "http://" . $conf["WEB_IP"] . $conf['UPLOAD']['upload_dir'] . '/' . date('Ymd', time()) . '/' . $request['file_md5'] . '.' . $suf,//文件链接,
    256.                     'data' => [],
    257.                     'file_status' => $file_status,
    258.                 ];
    259.             }
    260.  
    261.         } else {
    262.             $json = [
    263.                 'status' => 1,
    264.                 'message' => '上传出错请重试'
    265.             ];
    266.         }
    267.         $this->response()->write(json_encode($json));
    268.     }
    269.  
    270.     /**
    271.      * @name: 返回值处理
    272.      * @msg:
    273.      * @param {array} $data
    274.      * @param {int} $status
    275.      * @param {string} $message
    276.      * @param {array} $other
    277.      * @param {int} $statusCode
    278.      * @return {*}
    279.      */
    280.     public function returnMsg(array $data = [], int $status = 0, string $message = 'success', array $other = [], int $statusCode = 200)
    281.     {
    282.         $return = [
    283.             'status' => $status,
    284.             'message' => $message,
    285.             'data' => $data,
    286.         ]; 
    287.         if ($other) {
    288.             foreach ($other as $k => $v) {
    289.                 $return[$k] = $v;
    290.             }
    291.         }
    292.  
    293.         $this->response()->withHeader('Content-type', 'application/json;charset=utf-8')
    294.             ->withStatus($statusCode)
    295.             ->write(json_encode($return));
    296.         $this->response()->end();
    297.         return false;
    298.     }
    299.     
    300. }

    步骤3.后端测试好后，我们需要编写前端页面   

    前面已经说过  我们需要node npm 前端环境，如果已经安装好了  请忽略

    1）我们在任意一个目录下  打开终端cmd   然后运行命令  安装vue 脚手架：

    npm install -g @vue/cli

    2）创建一个新的Vue.js项目：

    npm create vue@latest

    一路按一下回车键

    如下图：

    3）进入项目目录：

    进入创建的Vue.js项目目录：

    cd vue-project

    运行

    npm install 

    4）安装axios 和 crypto-js 

    cnpm install axios

    cnpm install crypto-js

     5) 创建vue 实例

    在Vue项目的入口文件中（通常是 src/main.js），创建Vue实例并将Vue组件添加到实例中。如下图：

    6）实现上传  

    在Vue项目的入口文件中  src/App.vue  编写如下代码：

    1. <template>
    2.   <div>
    3.     <input type="file" ref="fileInput" @change="handleFileChange" />
    4.     <button @click="uploadFile">上传button>
    5.     <div v-if="uploadProgress > 0 && !uploadComplete">
    6.       上传进度: {{ uploadProgress }}%
    7.     div>
    8.     <div v-if="uploadComplete">上传完成div>
    9.   div>
    10. template>
    11.  
    12. <script>
    13. import axios from "axios";
    14. import CryptoJS from "crypto-js";
    15.  
    16. export default {
    17.   data() {
    18.     return {
    19.       file: null,
    20.       chunkSize: 1024 * 1024, // 分片大小（1MB）
    21.       currentChunk: 1, // 当前分片
    22.       totalChunks: 0, // 总分片数
    23.       fileMD5: "", // 文件的MD5值
    24.       uploadProgress: 0, // 上传进度
    25.       uploadComplete: false, // 上传是否完成
    26.     };
    27.   },
    28.   methods: {
    29.     handleFileChange(event) {
    30.       // 重置上传状态
    31.       this.uploadProgress = 0;
    32.       this.uploadComplete = false;
    33.       this.fileMD5 = "";
    34.  
    35.       this.file = event.target.files[0];
    36.       this.totalChunks = Math.ceil(this.file.size / this.chunkSize);
    37.  
    38.       // 计算整个文件的MD5值
    39.       const fileReader = new FileReader();
    40.       fileReader.onload = () => {
    41.         const fileData = fileReader.result;
    42.         const wordArray = CryptoJS.lib.WordArray.create(fileData);
    43.         this.fileMD5 = CryptoJS.MD5(wordArray).toString(CryptoJS.enc.Hex);
    44.         console.log(this.fileMD5);
    45.       };
    46.       fileReader.readAsArrayBuffer(this.file);
    47.     },
    48.     async uploadFile() {
    49.       if (!this.fileMD5) {
    50.         console.error("文件MD5值为空");
    51.         return;
    52.       }
    53.  
    54.       // 并发处理每个分片文件
    55.       const promises = [];
    56.  
    57.       for (let i = 1; i <= this.totalChunks; i++) {
    58.         const chunkMD5 = await this.calculateChunkMD5(i);
    59.  
    60.         // 发起检查分片状态的请求
    61.         const checkFormData = new FormData();
    62.         checkFormData.append("file_name", this.file.name);
    63.         checkFormData.append("file_md5", this.fileMD5);
    64.         checkFormData.append("file_chunk_md5", chunkMD5);
    65.         checkFormData.append("chunks", this.totalChunks);
    66.         checkFormData.append("cur_chunk", i);
    67.  
    68.         promises.push(
    69.           axios.post("/api/SPAP1/api/common/slice_upload_check", checkFormData).then((checkResponse) => {
    70.             if (checkResponse.data.status !== 0) {
    71.               alert(checkResponse.data.message);
    72.               console.error("分片状态检查失败，请上传正确格式的文件");
    73.               throw new Error("分片状态检查失败");
    74.             }
    75.  
    76.             // 发起分片上传请求
    77.             const startByte = (i - 1) * this.chunkSize;
    78.             const endByte = Math.min(i * this.chunkSize, this.file.size);
    79.             const chunk = this.file.slice(startByte, endByte);
    80.  
    81.             const uploadFormData = new FormData();
    82.             uploadFormData.append("file_name", this.file.name);
    83.             uploadFormData.append("file_md5", this.fileMD5);
    84.             uploadFormData.append("file_chunk_md5", chunkMD5);
    85.             uploadFormData.append("chunks", this.totalChunks);
    86.             uploadFormData.append("cur_chunk", i);
    87.             uploadFormData.append("file_chunk", chunk);
    88.  
    89.             return axios.post("/api/SPAP1/api/common/upload_file", uploadFormData, {
    90.               onUploadProgress: (progressEvent) => {
    91.                 // 计算并更新上传进度
    92.                 const chunkUploaded = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    93.                 this.uploadProgress = ((i - 1) / this.totalChunks) * 100 + (chunkUploaded / this.totalChunks);
    94.               },
    95.             }).then((uploadResponse) => {
    96.               // 检查上传请求的响应
    97.               if (uploadResponse.data.status !== 0) {
    98.                 alert(uploadResponse.data.message);
    99.                 console.error("上传请求失败，请上传正确格式的文件");
    100.                 throw new Error("上传请求失败");
    101.               }
    102.  
    103.               // 如果文件状态为 "end"，标记上传完成
    104.               if (uploadResponse.data.file_status == "end") {
    105.                 this.uploadComplete = true;
    106.               }
    107.             });
    108.           })
    109.         );
    110.       }
    111.  
    112.       try {
    113.         await Promise.all(promises);
    114.         if (this.uploadComplete) {
    115.           alert("上传完成");
    116.           console.log("上传完成");
    117.         }
    118.       } catch (error) {
    119.         console.error("上传失败", error);
    120.       }
    121.     },
    122.     calculateChunkMD5(chunkNumber) {
    123.       return new Promise((resolve) => {
    124.         const startByte = (chunkNumber - 1) * this.chunkSize;
    125.         const endByte = Math.min(chunkNumber * this.chunkSize, this.file.size);
    126.         const chunk = this.file.slice(startByte, endByte);
    127.  
    128.         const reader = new FileReader();
    129.         reader.onload = (e) => {
    130.           const arrayBuffer = e.target.result;
    131.           const wordArray = CryptoJS.lib.WordArray.create(arrayBuffer);
    132.           const md5 = CryptoJS.MD5(wordArray).toString(CryptoJS.enc.Hex);
    133.           resolve(md5);
    134.         };
    135.         reader.readAsArrayBuffer(chunk);
    136.       });
    137.     },
    138.   },
    139. };
    140. script>

    7）考虑到上面的axios 发送接口会与前端报跨域报错   故此这里采用axios 代理模式  进行处理

    怎么解决跨域呢 

    在最外面的vite.config.js 文件中，加入server 这个参数  

    1. import { fileURLToPath, URL } from 'node:url'
    2.  
    3. import { defineConfig } from 'vite'
    4. import vue from '@vitejs/plugin-vue'
    5.  
    6. // https://vitejs.dev/config/
    7. export default defineConfig({
    8.   plugins: [
    9.     vue(),
    10.   ],
    11.   resolve: {
    12.     alias: {
    13.       '@': fileURLToPath(new URL('./src', import.meta.url))
    14.     }
    15.   },
    16.   server: {
    17.     hmr: { overlay: false }, // 禁用或配置 HMR 连接 设置 server.hmr.overlay 为 false 可以禁用服务器错误遮罩层
    18.     // 服务配置
    19.     port: 8080, // 类型： number 指定服务器端口;
    20.     open: false, // 类型： boolean | string在服务器启动时自动在浏览器中打开应用程序；
    21.     cors: true, // 类型： boolean | CorsOptions 为开发服务器配置 CORS。默认启用并允许任何源
    22.     proxy: {
    23.       '/api': {
    24.         target: 'http://192.168.31.128:86', // Your backend server URL
    25.         changeOrigin: true,
    26.         pathRewrite: {
    27.           '^/api': '', // Remove the '/api' prefix when forwarding the request
    28.         },
    29.       },
    30.     }
    31.   }
    32. })

    其中port 为前端页面端口   target 为后端接口地址   其他可以不变。

    8）调试运行

    在命令行运行调试命令：

    npm run dev

    9) 打开页面

    上传一个正常的文件 

    Nice 基本上整个文件分片上传就完成了 

  • 相关阅读:
    分布式版本控制工具 Git 的使用方式
    千兆以太网
    面试经验分享 | 驻场安全服务工程师面试
    全流量分析应用运行和访问情况
    闭包和装饰器
    理解Go中的数据类型
    centos安装redis教程
    Vue中v-on的基础用法、参数传递和修饰符
    （论文阅读32/100）Flowing convnets for human pose estimation in videos
    2023高教杯数学建模1：ABC题目+初步想法
  • 原文地址：https://blog.csdn.net/u013416034/article/details/133268179