layui大文件分成很多小文件上传腾讯云

最新推荐文章于 2024-05-27 17:05:30 发布
最新推荐文章于 2024-05-27 17:05:30 发布
阅读量483 收藏
点赞数
我们坚信：人民有信仰 民族有希望 国家有力量，我在祖国怀里成长，祖国在我心中扎根
本文链接：https://blog.csdn.net/YoungSuAng/article/details/119533586
版权

对于很大的文件比如几百M的音频视频 软件上传，如果直接上传 服务器，经常处理不了。
可以利用layui，在客户端先把大文件切割成小文件 一个一个上传，然后服务器端，再组合成一个大文件。

后台代码

 public function bigUpload(Request $request)
    {
         $params = $request->param();
        $status = 1;
        $fname = sprintf('tmp/%s.%s', $params['fileName'],$params['fileExt']);
        $data = file_get_contents($_FILES['file']['tmp_name']);
        if ($_POST['page'] == 1) {
            file_put_contents($fname, $data);
        } else {
            file_put_contents($fname, $data, FILE_APPEND);
        }
        $path = public_path()."tmp/{$params['fileName']}.{$params['fileExt']}";
        if ($params['totalPage'] == $params['page']) {
            $status = 2;
            $url =Upload::cosUpload($path);
            $res = ['status' => $status, 'downUrl' =>$url];
            return json($res);
        }
        $res = ['status' => $status, 'downUrl' => $path];
        return  json($res);
    }


//上传服务器代码
public static function cosUpload($path)
    {

        $secretId = "AKI6Fgq"; //"云 API 密钥 SecretId";
        $secretKey = "2mvS"; //"云 API 密钥 SecretKey";
        $region = "ap-shanghai"; //设置一个默认的存储桶地域
        $cosClient = new \Qcloud\Cos\Client(
            array(
                'region' => $region,
                'schema' => 'https', //协议头部，默认为http
                'credentials' => array(
                    'secretId' => $secretId,
                    'secretKey' => $secretKey)));
        try {
            $bucket = "18601"; //存储桶名称 格式：BucketName-APPID
            $key = time().".jpg"; //此处的 key 为对象键，对象键是对象在存储桶中的唯一标识
            $srcPath = $path;//本地文件绝对路径
            $file = fopen($srcPath, "rb");
            if ($file) {
                $cosClient->Upload(
                    $bucket,
                    $key,
                    $file
                );
                $url = "httpip/".$key;// 地址
                return $url;
            }
        } catch (\Exception $e) {
            return  $e;
        }
    }

前台代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <style type="text/css">
        .mask{position:fixed;width:100%;height:100%;top:0;left:0;background:#000;opacity:0.8;filter:alpha(Opacity=80);-moz-opacity:0.8;z-index:999;display:none;}
        .loading{position:fixed;width:300px;left:50%;margin-left:-150px;top:200px;height:18px;border-radius:10px;background:#fff;z-index:9999;overflow:hidden;display:none;}
    </style>
</head>
<body>
<div class="layui-main">
    <form class="layui-form" method="post" action="" enctype="multipart/form-data">
        <input type="hidden" name="form_submit" value="ok" />
        <div class="layui-form-item">
            <label class="layui-form-label">安装包：</label>
            <input type="hidden" id="totalPage" value="0"/>
            <input type="hidden" id="page" value="1"/>
            <input type="hidden" id="status" value="0"/>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="fileUpload"><i class="layui-icon"></i>上传文件</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">安装包名：</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name" value="" lay-verify="title" autocomplete="off" readonly="true" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">下载地址</label>
            <div class="layui-input-block">
                <input type="text" name="downUrl" id="downUrl" value="" lay-verify="downUrl" autocomplete="off" readonly="true" placeholder="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<div class="mask"></div>
<div class="loading">
    <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="uploadProgress">
        <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
    </div>
</div>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form', 'upload', 'element'], function () {
        var form = layui.form;
        var upload = layui.upload;
        var element = layui.element;
        var $ = layui.$;
        upload.render({
            elem: '#fileUpload',
            url: 'bigUpload', //处理上传文件接口
            accept: 'file',
            auto: false,
            acceptMime: '*.*',//允许上传的文件类型
            choose: function (obj) {
                element.progress('uploadProgress', '0%');
                $('.mask').show();
                $('.loading').show();
                var data = this.data;
                var files = obj.pushFile();
                var LENGTH = 100 * 1024; //每片文件大小
                obj.preview(function (index, file, result) {
                    var totalSize = file.size;
                    var totalPage = Math.ceil(totalSize / LENGTH);
                    $('#totalPage').val(totalPage);
                    $('#page').val('1');
                    $('#status').val('1');
                    var fileName = file.name;
                    $('#name').val(fileName);
                    var fileExt = fileName.substr(fileName.lastIndexOf('.') + 1);
                    fileName = fileName.substr(0, fileName.lastIndexOf('.'));
                    var progressTimer = setInterval(function () {
                        var totalPage = parseInt($('#totalPage').val());
                        var page = parseInt($('#page').val());
                        var status = $('#status').val();
                        if (parseInt(totalPage) == parseInt(page) && (parseInt(status) == 2 || parseInt(status) == -1)) {
                            clearInterval(progressTimer);
                        } else {
                            if (status == 1) {
                                $('#status').val('0');
                                data.fileName = fileName;
                                data.page = page;
                                data.totalPage = totalPage;
                                data.fileExt = fileExt;
                                obj.upload(index, file.slice((page - 1) * LENGTH, page * LENGTH));
                            }
                        }
                    }, 100);
                });
            },
            done: function (res) {
                if (res.status == 1) { //分片上传
                    var page = parseInt($('#page').val());
                    var totalPage = parseInt($('#totalPage').val());
                    element.progress('uploadProgress', Math.ceil(page * 100 / totalPage) + '%');
                    page = page + 1;
                    console.log(page);
                    $('#page').val(page);
                    $('#status').val('1');
                } else if (res.status == 2) { //上传完成
                    element.progress('uploadProgress', '100%');
                    $('#status').val('2');
                    $('#downUrl').val(res.downUrl);
                    layer.msg('上传成功', {time: 1000, anim: 0}, function () {
                        $('.mask').hide();
                        $('.loading').hide();
                    });
                } else { //上传错误
                    $('#status').val('-1');
                    element.progress('uploadProgress', '0%');
                    console.log(!typeof (res.downUrl) == "undefined");
                    if (typeof (res.downUrl) == "undefined") {
                    } else {
                        $('#downUrl').val(res.downUrl);
                    }
                    layer.msg("上传失败，请重试", {time: 3000, anim: 0}, function () {
                        $('.mask').hide();
                        $('.loading').hide();
                    });
                }
            },
            error: function(){
                $('.mask').hide();
                $('.loading').hide();
            }
        });
    });
</script>
</body>
</html>

注意几点
在这里插入图片描述

Young' Su Ang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui+腾讯云存储+app-info-parser.js实现自动解包并分片上传
m0_37961140的博客
08-25 435
<html> <head> <meta charset="utf-8"> <title></title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, ini.
解决 layui 上传大文件奔溃的问题。
leehong的BLOG
06-29 1143
layui 上传大文件奔溃经过排查是由于obj.preview函数造成的
Layui上传系列之二（多文件分块上传优化实现）
龙井茶的Sky
10-08 2163
接下来，就要实现layui的uploader分块上传了，在官网上没有提到分块上传，倒是有一个多文件选择后，显示文件列表的例子。 目录 现状分析 我的做法 功能优化 上代码了 现状分析 对于我们能有啥启发呢，其实主要就是使用了choose事件，然后有个preview方法，可以针对每个文件进行处理（如图片文件预览） 问了下度娘，网上也有layui分块上传的例子，基本原理就是在上述preview方法中，对单个文件进行分块，多次调用上传，即可实现分块上传。 但是网上的例子有个问题就是：只能是单个.
layui多文件上传
最新发布
费马程序猿的博客
05-27 549
【代码】layui多文件上传。
layui大文件分成很多小文件上传Oss
weixin_45960743的博客
08-02 572
对于很大的文件比如几百M的音频视频 软件上传，如果直接上传 服务器，经常处理不了。 可以利用layui，在客户端先把大文件切割成小文件 一个一个上传，然后服务器端，再组合成一个大文件。 服务端代码 public function bigUpload(Request $request) { $params = $request->param(); $status = 1; $fname = sprintf('tmp/%s.%s', $param.
基于阿里云 大文件分片上传（oss + layui + js版本）：
masterphp的博客
08-24 1026
基于阿里云 大文件分片上传（oss + layui + js版本）：
【Layui多文件上传】自定义交互
05-16
基于Layui的多文件上传，包含上传过程中的自定义交互。参考文档： https://blog.csdn.net/qq_32768761/article/details/138917796?spm=1001.2014.3001.5501
使用layui实现多文件列表上传
12-28
在“使用layui实现多文件列表上传”这个项目中，主要涉及到了layui的文件上传功能，这在网页应用中是非常常见且实用的功能，尤其对于需要用户提交多份文件的场景。 首先，layui的文件上传组件是基于HTML5的File API...
SpringBoot+layui实现文件上传功能
08-27
在本文中，我们将探讨如何利用Spring Boot框架与layui前端组件库来实现文件上传功能。Spring Boot简化了基于Spring的应用程序的构建和开发流程，通过自动配置各种组件，使得开发者能够快速搭建项目。而layui则是一个...
文件批量上传 tp+layui
02-17
标题“文件批量上传 tp+layui”表明我们要讨论的是一个基于ThinkPHP（简称tp）框架和Layui前端组件库实现的文件批量上传功能。Layui是一个轻量级的前端框架，提供了丰富的UI组件，而ThinkPHP则是一个流行的PHP开发...
layui一个页面使用多个文件upload上传按钮
09-02
本篇文章将详细讲解如何在layui中实现一个页面上使用多个独立的文件上传按钮，以及相关的配置和注意事项。 首先，layui的upload组件是基于HTML5的File API构建的，支持多文件选择、预览、上传进度显示等功能。在...
php实现大文件上传带进度条
06-12
最近因工作需要开发一个视频网站涉及到百兆视频上传，于是查阅各种资料实现php大文件上传，拿出来和大家共享下。 实现方法php_apc扩展。在php.ini自行安装apc扩展并作相应设置。
百度多文件上传插件完美Demo-支持分片上传、续点上传、多文件进度条单独显示。
05-31
支持H5/Flash等，用户可以自定义配置，也可以选择优先级支持，支持IE6等。
layui 实现表单和文件上传一起传到后台的例子
10-16
今天小编就为大家分享一篇layui 实现表单和文件上传一起传到后台的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
React+Antd+Upload实现大文件分片上传
fankeweiii的博客
08-08 1692
React+Antd+Upload实现大文件分片上传
layui实现文件分片上传
qq_36596869的博客
08-02 1723
html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> &l
Layui文件单个上传、批量上传、多条件上传
热门推荐
慕白Lee的博客
10-31 4万+
Layui超实用技术解决方案 一、文件上传前端 <div> <div class="layui-upload" align="left"> ...
layui框架实战案例(21)：layui上传的哪些事(layui.upload组件、 file文件域、php后台上传)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-29 7179
使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象。
layui使用腾讯云对象存储临时密钥上传文件至腾讯云对象存储
05-18
要在LayUI中使用腾讯云对象存储服务，需要完成以下步骤： ...通过以上步骤，就可以在LayUI中使用腾讯云对象存储服务上传文件了。需要注意的是，上传文件时需要确保文件大小不超过50MB，否则需要使用分块上传。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值