TP6 文件分片上传、断点续传

最新推荐文章于 2023-12-15 14:06:30 发布
最新推荐文章于 2023-12-15 14:06:30 发布
阅读量185 收藏
点赞数
文章标签： php javascript
原文链接：https://blog.csdn.net/qq_27080351/article/details/123229953
版权

PHP代码

<?php
namespace app\controller;

use app\BaseController;

class Index extends BaseController
{
    public function upload()
    {   
        $filename = 'file';
        $path = 'common';
        try {
            $file = request()->file($filename);
            if (empty($file)) {
                throw new \Exception('没有文件上传');
            }

            if ($this->request->request('chunkid')) 
            {
                $chunkid = $this->request->request('chunkid');
                $chunkindex = $this->request->request('chunkindex');
                $chunkcount = $this->request->request('chunkcount');

                $fileName = $chunkid . "-" . $chunkindex . '.tmp';
                $path = $path . DIRECTORY_SEPARATOR . date('Ymd');
                $filepath = \think\facade\Filesystem::disk('public')->putFileAs($path, $file, $fileName);

                // 合并
                if ($chunkindex + 1 == $chunkcount) {
                    $filePath = config('filesystem.disks.public.root') . DIRECTORY_SEPARATOR . $path . DIRECTORY_SEPARATOR;
                    $completed = true;
                    //检查所有分片是否都存在
                    for ($i = 0; $i < $chunkcount; $i++) {
                        if (!file_exists("{$filePath}{$chunkid}-{$i}.tmp")) {
                            $completed = false;
                            break;
                        }
                    }
                    // 删除
                    if(!$completed) {
                        for ($i = 0; $i < $chunkcount; $i++) {
                            if (file_exists("{$filePath}{$chunkid}-{$i}.tmp")) {
                                @unlink("{$filePath}{$chunkid}-{$i}.tmp"); //删除分片
                            }
                        }       
                        throw new \Exception("分片上传文件错误");
                    }

                    // uniapp 上传会拿不到文件扩展名
                    $ext = $file->getOriginalExtension() ? $file->getOriginalExtension() : substr(strrchr($this->request->post('filename'), '.'), 1);
                    if (!$destFile = @fopen($filePath . $chunkid . '.' . $ext, "wb")) {
                        throw new \Exception("分片上传文件错误.");
                    }

                    if (flock($destFile, LOCK_EX)) { // 进行排他型锁定
                        for ($i = 0; $i < $chunkcount; $i++) {
                            $partFile = "{$filePath}{$chunkid}-{$i}.tmp";
                            if (!$handle = @fopen($partFile, "rb")) {
                                break;
                            }
                            while ($buff = fread($handle, filesize($partFile))) {
                                fwrite($destFile, $buff);
                            }
                            @fclose($handle);
                            @unlink($partFile); //删除分片
                        }

                        flock($destFile, LOCK_UN);
                    }
                    @fclose($destFile);

                    $filepath = request()->domain() . '/storage/' . str_replace(DIRECTORY_SEPARATOR, '/', $path) . '/' . $chunkid . '.' . $ext;
                }

            } else {
                $upload = config('filesystem.config');
                validate(['file'=> [
                    'fileSize' => $upload['fileSize'],
                    'fileExt' => $upload['fileExt'],
                    'fileMime' => $upload['fileMime'],
                ]], [
                    'file.fileSize' => '上传文件不能大于'. $upload['fileSize'] / 1024 / 1024 .'M',
                    'file.fileExt' => '上传文件类型不允许',
                    'file.fileMime' => '上传文件类型不允许.',
                ])->check(['file' => $file]);

                if (is_array($file)) {
                    $url = [];
                    $filepath = [];
                    foreach ($file as $value) {
                        $upload_path = \think\facade\Filesystem::disk('public')->putFile($path, $value);
                        $url[] = request()->domain() . DIRECTORY_SEPARATOR . 'storage' . DIRECTORY_SEPARATOR . $upload_path;            
                        $filepath[] = $upload_path;
                        $source[] = app()->getRootPath() . 'public' . DIRECTORY_SEPARATOR . 'storage' . DIRECTORY_SEPARATOR . $upload_path;
                        event('upload_success', ['source' => app()->getRootPath() . 'public' . DIRECTORY_SEPARATOR . 'storage' . DIRECTORY_SEPARATOR . $upload_path, 'file' => $file]);
                    }
                } else {
                    $upload_path = \think\facade\Filesystem::disk('public')->putFile($path, $file);
                    $url = request()->domain() . DIRECTORY_SEPARATOR . 'storage' . DIRECTORY_SEPARATOR . $upload_path;
                    $filepath = $upload_path;
                    $source = app()->getRootPath() . 'public' . DIRECTORY_SEPARATOR . 'storage' . DIRECTORY_SEPARATOR . $upload_path;
                    event('upload_success', ['source' => app()->getRootPath() . 'public' . DIRECTORY_SEPARATOR . 'storage' . DIRECTORY_SEPARATOR . $upload_path, 'file' => $file]);
                }
            }
        } catch (\think\exception\ValidateException $e) {
            throw new \Exception($e->getMessage());
            
        } catch(\Exception $e) {
            throw new \Exception($e->getMessage());
            
        }
        return json(['filepath' => $filepath, 'url' => $url ?? '', 'source' => $source ?? '']);
    }

}

前端代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style lang="less" scoped>
        .fileupload {
    	    display: flex;
    	    flex-direction: column;
        }
	    .fileupload-title {
	        display: flex;
	        justify-content: flex-end;
	        padding: 5px 0px;
	    }

	    .fileupload-content {
	        flex: 1;
	    }
	</style>
</head>

<body>
    <div id="app">
        <div class="fileupload">
            <div class="fileupload-title">
                <el-button type="primary" for="file" @click="$refs.file.click()">文件上传(分片上传)<i class="el-icon-upload el-icon--right"></i></el-button>
                <input style="display:none" type="file" id="file" name="file" ref="file" multiple="multiple" @change="fileChange($event)" />
            </div>
            <div class="fileupload-content">
                <el-table :data="fileUploadList" border stripe>
                    <el-table-column label="文件名称" prop="name"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" plain v-if="scope.row.status==1" @click="stop(scope.$index)">停止上传</el-button>
                            <el-button type="danger" plain v-if="scope.row.status==-1" @click="continueUp(scope.$index)">断点续传</el-button>
                            <el-link :underline="false" v-if="scope.row.filepath" v-text="scope.row.filepath"></el-link>
                        </template>
                    </el-table-column>
                    <el-table-column label="上传进度">
                        <template slot-scope="scope">
                            <div>
                                <el-progress :status="scope.row.isSuccess==1?'success':scope.row.isSuccess==2?'exception':null" :percentage="scope.row.percent"></el-progress>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

let config = {
    timeout: 120000, //设置超时时长
    onUploadProgress: function(progress) {
        this.fileUploadList[i].percent = Math.round(
            (progress.loaded * 100) / progress.total
        );
    }.bind(this)
};

function AddFiles(filelist, conf) {
    return axios.post('/index/upload', filelist, conf)
}

new Vue({
    el: '#app',
    data() {
        return {
            fileUploadList: [],
            bytesPerPiece: 1024 * 1024 * 2, // 每个文件切片大小定为4MB .
        };
    },
    created: function() {

    },
    methods: {
        async fileChange(event) {
            this.fileUploadList = [];
            let filelist = event.target.files;
            if (filelist.length > 8) {
                this.$message("上传文件个数不能超过8个");
                return;
            }
            if (filelist.length > 0) {
                for (let i = 0; i < filelist.length; i++) {
                    let filedata = {
                        file: filelist[i],
                        name: filelist[i].name.substring(0, filelist[i].name.length - 4),
                        size: filelist[i].size,
                        date: filelist[i].lastModified,
                        isSuccess: 0, //是否上传成功,0上传中，1成功，2失败
                        percent: 0,
                        speed_time: '',
                        lastTime: 0,//上一次计算时间
                        lastSize: 0,//上一次计算的文件大小
                        status: 1,
                        lastChunk: {},
                        filepath: '',
                    };
                    this.fileUploadList.push(filedata);
                }
                for (let i = 0; i < filelist.length; i++) {
                    let config = {
                        timeout: 120000,
                        onUploadProgress: function(progress) {
                            let percent = Math.round(
                                (progress.loaded * index * 100) / filesize
                            );
                            if (this.fileUploadList[i].percent < percent) {
                                this.fileUploadList[i].percent = percent > 100 ? 100 : percent;
                            }
                        }.bind(this)
                    };

                    let chunkid = Number(Math.random().toString().substr(5,10) + Date.now()).toString(36);
                    let bytesPerPiece = this.bytesPerPiece;
                    let totalPieces = 0;
                    let blob = filelist[i];
                    let start = 0;
                    let end;
                    let index = 0;
                    let filesize = blob.size;
                    let filename = blob.name;
                    console.log(blob)
                    console.log(typeof blob)
                    //计算文件切片总数
                    totalPieces = Math.ceil(filesize / bytesPerPiece);
                    while(start < filesize) {
                        // 停止退出
                        if (this.fileUploadList[i].status == -1) {
                            this.fileUploadList[i].lastChunk = {
                                chunkid: chunkid,
                                index: index,
                                start: start,
                                end: end,
                            };
                            break;
                        }
                        end = start + bytesPerPiece;
                        if(end > filesize) {
                            end = filesize;
                        }

                        let chunk = blob.slice(start,end);//切割文件    
                        let sliceIndex= blob.name + index;
                        let formData = new FormData();
                        formData.append("file", chunk, filename);
                        formData.append("chunkid", chunkid);
                        formData.append("chunkindex", index);
                        formData.append("chunkcount", totalPieces);
                        await AddFiles(formData, config).then(res => {
                            if (res.status == 200) {
                                if (index + 1 == totalPieces) {
                                    this.fileUploadList[i].isSuccess = 1;
                                    this.fileUploadList[i].percent = 100;
                                    this.fileUploadList[i].status = 0;
                                    this.fileUploadList[i].filepath = res.data.filepath;
                                    this.$message("上传成功");
                                }
                            } else {
                                this.fileUploadList[i].isSuccess = 2;
                                this.fileUploadList[i].status = 0;
                                this.$message("上传失败");
                            }
                        });                        
                        start = end;
                        index++;
                    }
                }
            }
        },
        stop(i) {
            this.fileUploadList[i].status = -1;
        },
        async continueUp(i) {
            let config = {
                timeout: 120000,
                onUploadProgress: function(progress) {
                    let percent = Math.round(
                        (progress.loaded * index * 100) / filesize
                    );
                    if (this.fileUploadList[i].percent < percent) {
                        this.fileUploadList[i].percent = percent > 100 ? 100 : percent;
                    }
                }.bind(this)
            };
            this.fileUploadList[i].status = 1;

            let row = this.fileUploadList[i];
            let blob = row.file;
            let chunkid = row.lastChunk.chunkid;
            let bytesPerPiece = this.bytesPerPiece;
            let totalPieces = 0;
            let start = row.lastChunk.start;
            let end = row.lastChunk.end;
            let index = row.lastChunk.index;
            let filesize = blob.size;
            let filename = blob.name;
            //计算文件切片总数
            totalPieces = Math.ceil(filesize / bytesPerPiece);
            while(start < filesize) {
                // 停止退出
                if (row.status == -1) {
                    row.lastChunk = {
                        chunkid: chunkid,
                        index: index,
                        start: start,
                        end: end,
                    };
                    break;
                }
                end = start + bytesPerPiece;
                if(end > filesize) {
                    end = filesize;
                }

                let chunk = blob.slice(start,end);//切割文件    
                let sliceIndex= blob.name + index;
                let formData = new FormData();
                formData.append("file", chunk, filename);
                formData.append("chunkid", chunkid);
                formData.append("chunkindex", index);
                formData.append("chunkcount", totalPieces);
                await AddFiles(formData, config).then(res => {
                    if (res.status == 200) {
                        if (index + 1 == totalPieces) {
                            row.isSuccess = 1;
                            row.percent = 100;
                            row.status = 0;
                            row.filepath = res.data.filepath;
                            this.$message("上传成功");
                        }
                    } else {
                        row.isSuccess = 2;
                        row.status = 0;
                        this.$message("上传失败");
                    }
                });                        
                start = end;
                index++;
            }
        }
    }
})
</script>

</html>

搬砖的菜鸟玩家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
thinkphp6+webuploader实现大文件(视频)分片上传/本地保存或上传OSS
程序员张礼奎的博客
11-10 4953
thinkPHP6+webuploader分片上传大视频的解决方案: ①能解决视频太大，1G、2G直传服务器压力过大 ②部分追求完美的人不发接受直传，那只能分片上传 ③分片上传是我找到的比较合理的解决方案 ④我感觉这个方案只是能用，肯定还有优化的空间，如有大佬看到欢迎指点 ⑤综合各路大佬的代码进行修改 可以接受不分片上传的直接不要往下看，直接去这里设置： Nginx上传大文件响应超时设置,TP6响应超时设置 前端代码 <link rel="stylesheet" type="text/css" hr
layui+腾讯cos+tp6分片上传
qq_36596869的博客
08-06 509
后台代码 Tencent.php类 <?php namespace app\server\lib; use Qcloud\Cos\Client; use think\facade\Cache; use think\facade\Config; class Tencent { //连接腾讯cos的bucket public static function cosConnect() { $secretId = Config::get('se
tp6实现腾讯云存储与分片
weixin_59063045的博客
08-05 504
腾讯云对象存储：https://cloud.tencent.com/document/product/436/12266 把配置封装到config中 控制器下 public function upload() { $path = \request()->file('file')->getPathname(); //处理分片上传文件 $status = 1; //上传文件要保存的路径 ...
大规格文件的上传优化(实用篇)
程序员成长指北
09-11 1354
在开发过程中，收到这样一个问题反馈，在网站上传 100 MB 以上的文件经常失败，重试也要等老半天，这就难为需要上传大规格文件的用户了。那么应该怎么做才能快速上传，就算失败了再次发送也能...
基于php+webuploader的大文件分片上传，支持断点续传，带进度条
weixin_45525177的博客
09-19 382
参考文章：http://blog.ncmem.com/wordpress/2023/09/19/%e5%9f%ba%e4%ba%8ephpwebuploader%e7%9a%84%e5%a4%a7%e6%96%87%e4%bb%b6%e5%88%86%e7%89%87%e4%b8%8a%e4%bc%a0%ef%bc%8c%e6%94%af%e6%8c%81%e6%96%ad%e7%82%b9%e7%bb%ad%e4%bc%a0%ef%bc%8c%e5%b8%a6%e8%bf%9b/临时文件，用于存储分片。
分片上传（基于tp6）
学习者小高
04-15 948
分片上传
ThinkPHP6 API 单文件+多文件上传代码实现方式
UPCTO
10-27 1058
开发中经常要用到接口上传 单文件或多文件，做个备忘录，有需要的同学直接copy。提交方式：form-data , 参数名 file[]
Layui+thinkPHP6.0文件上传
骜蛟的博客
01-28 2808
Layui+thinkPHP6.0文件上传 1、写在前面 Layui文件上传逻辑：异步上传（点击按钮就将文件上传到服务器，然后再返回线上图片地址，等提交表单提交时 ，将其它表单信息和图片的线上地址一起提交 ） 先给我自己的代码 2、Layui前端代码说明 <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">标签</l
tp6 分片上传
最新发布
qq_58954197的博客
12-15 446
【代码】分片上传文件。
php结合web uploader插件实现分片上传文件
10-22
主要为大家详细介绍了php结合web uploader插件实现分片上传文件， 采用大文件分片并发上传，极大的提高了文件上传效率，感兴趣的小伙伴们可以参考一下
thinkphp+WebUploader
10-17
WebUploader插件实现上传文件
php大文件断点续传.rar
09-28
使用php语言结合前端html、css、js和第三方插件实现大文件的上传功能，该功能省时，上传速度快等优点
文件批量上传 tp+layui
02-17
支持拖动上传
TP3.2.3框架文件上传操作实例详解
10-15
主要介绍了TP3.2.3框架文件上传操作,结合实例形式详细分析了thinkPHP3.2.3框架文件上传相关原理、实现方法与操作注意事项,需要的朋友可以参考下
tp3.2 -webuploader较大视频文件分段上传方法.rar
10-31
thinkphp3.2 webuploader较大视频文件分段上传方法demo，大视频分段上传，上传完成后又将分段视频合并成一个视频文件。
TP5 文件上传封装方法
11-10
TP5框架下，封装的文件上传方法，可以直接调用，单文件和多文件都可以
tp6使用rabbitmq
09-22
tp6使用rabbitmq
文件分片上传、断点续传、大文件秒传
weixin_52041354的博客
10-23 225
解决问题是文件太大，如果上传一个很大文件到服务器，会引起超时导致文件无法上传，这时可以将文件切割成一个一个小的文件循环上传到服务器后再拼接成完整的文件就可以解决这个问题，而且还可以通过并发提速。下面代码分为3块，获取初始化ID、循环切割文件并上传、判断上传数量并申请合并文件。原理都是一样，接收切片内容保存到本地，然后判断接收完成后将所有切片整合成一个文件。四、Java实现本地分片上传（与前端代码不对应）三、Java+OSS+Redis实现切片。Controller接参。
tp6 分块上传文件
09-13
要实现TP6分块上传文件的功能，你可以按照以下步骤进行操作： 1. 首先，在前端页面中使用百度Web Uploader插件，通过配置实现分块上传文件的功能。根据引用和引用[2]中的代码示例，你可以监听`uploadSuccess`事件和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值