layui大文件分成很多小文件上传Oss

最新推荐文章于 2023-08-29 00:02:36 发布
最新推荐文章于 2023-08-29 00:02:36 发布
阅读量566 收藏 2
点赞数 1
文章标签： upload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45960743/article/details/119332997
版权

对于很大的文件比如几百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 =cosUpload($path);
            $res = ['status' => $status, 'url' =>$url];
            return json($res);
        }
        $res = ['status' => $status, 'url' => $path];
        return  json($res);
    }

   function cosUpload($path)
{
    $secretId = "******************"; //"云 API 密钥 SecretId";
    $secretKey = "******************"; //"云 API 密钥 SecretKey";
    $region = "ap-shanghai"; //设置一个默认的存储桶地域
    $cosClient = new \Qcloud\Cos\Client(
        array(
            'region' => $region,
            'schema' => 'https', //协议头部，默认为http
            'credentials' => array(
                'secretId' => $secretId,
                'secretKey' => $secretKey)));
    try {
        $bucket = "bliuce-1304516696"; //存储桶名称 格式：BucketName-APPID
        $key = time().".jpg"; //此处的 key 为对象键，对象键是对象在存储桶中的唯一标识
        $srcPath = $path;//本地文件绝对路径
        $file = fopen($srcPath, "rb");
        if ($file) {
            $cosClient->Upload(
                $bucket,
                $key,
                $file
            );
            $url = "https://back.sha1.ren/".$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="./layui/css/layui.css"  media="all">
        <script src="./layui/layui.js" charset="utf-8"></script>
        <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		<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="">
				<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: 'upload.php', //处理上传文件接口
					accept: 'file',
					auto: false,
					acceptMime: '.exe,.zip,.rar,.gz',//允许上传的文件类型
					choose: function (obj) {
						element.progress('uploadProgress', '0%');
						$('.mask').show();
						$('.loading').show();
						var data = this.data;
						var files = obj.pushFile();
						var LENGTH = 500 * 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.url);
							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>
欠收拾
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
layui大文件分成很多小文件上传
robinhunan的博客
11-01 6420
对于很大的文件比如几百M的音频视频 软件上传，如果直接上传 服务器，经常处理不了。 可以利用layui，在客户端先把大文件切割成小文件 一个一个上传，然后服务器端，再组合成一个大文件。 服务器端讲小文件组合成大文件代码 。文件名 upload.html <?php //处理分片上传文件 $status=1; //上传文件要保存的路径 $fname = sprintf('/tmp...
layui多个文件上传案例
weixin_35756690的博客
12-20 1090
好的，我会尽力用中文来为您解答。 在使用 layui 进行多文件上传的时候，首先需要在页面中引入 layui 的文件上传模块： <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.js"></script> 然后，可以在页面中添加一个文件上传的表单元素，并为它添加一个 id 属性： <form ...
Layui上传系列之二（多文件分块上传优化实现）
龙井茶的Sky
10-08 2153
接下来，就要实现layui的uploader分块上传了，在官网上没有提到分块上传，倒是有一个多文件选择后，显示文件列表的例子。 目录 现状分析 我的做法 功能优化 上代码了 现状分析 对于我们能有啥启发呢，其实主要就是使用了choose事件，然后有个preview方法，可以针对每个文件进行处理（如图片文件预览） 问了下度娘，网上也有layui分块上传的例子，基本原理就是在上述preview方法中，对单个文件进行分块，多次调用上传，即可实现分块上传。 但是网上的例子有个问题就是：只能是单个.
解决 layui 上传大文件奔溃的问题。
leehong的BLOG
06-29 1139
layui 上传大文件奔溃经过排查是由于obj.preview函数造成的
基于阿里云 大文件分片上传（oss + layui + js版本）：
masterphp的博客
08-24 1016
基于阿里云 大文件分片上传（oss + layui + js版本）：
文件上传（普通上传，oss上传，oss大文件分段上传）
11-03
本文将深入探讨如何使用Java语言实现文件的本地上传、OSS（Object Storage Service）普通上传以及OSS大文件的分段上传。我们将重点讲解每个过程，并提供相关的知识点。 首先，我们来看本地文件上传。在Java中，我们...
微信小程序上传文件到阿里OSS教程
01-03
前言 （一）开通OSS服务与新建Bucket 开通OSS服务这里省略，新建...这里就不多做介绍了，这是上传文件到oss需要的参数，这些数据可以从后台获取。 { accessid: 6MKO******4AUk44, host: http://post-test.oss-cn
微信小程序环境下将文件上传到OSS的方法步骤
01-20
在微信小程序环境中，将文件上传到阿里云对象存储服务（OSS）通常涉及以下几个关键步骤，这些步骤确保了文件安全、高效地传输到云端。以下是对这些步骤的详细解释： **步骤1：配置Bucket跨域** 当客户端（此处是...
layui实现文件压缩上传
12-25
改造layui的上传组件,实现将大图片压缩然后进行上传,感兴趣的可以下载!
java上传本地文件到oss指定目录
01-08
在Java开发中，将本地文件上传到阿里云OSS（Object Storage Service）是常见的操作，尤其在处理大数据存储和分发时。阿里云OSS提供了一种高效、安全且经济的云端存储解决方案。本篇文章将详细讲解如何使用Java SDK...
layui框架学习（42：文件上传模块-上）
最新发布
gc_2299的博客
08-29 1671
学习并记录layui框架中内置模块的文件上传模块的参数设置方式。
layui 文件实现分片上传和 断点续传 和 急速秒传 SpringBoot JAVA
这个柠檬有丶酸的博客
12-21 3281
一丶分片上传 分片上传 slice()这个方法功能是将一个文件切割为一系列特定大小的小数据片，分别将这些小数据片分别上传到服务端，全部上传完后再由服务端将这些小数据片合并成为一个完整的资源。 二 丶 断点续传 断点续传需要使用 MD5生成一个文件的唯一码，后台数据库会存下上传记录也就是分片位置和总分片数。 思路就是每次上传之前先拿到MD5的唯一码去数据库查到文件的上传记录以及分片位置和总片数返回给前端从下一个分片开始上传。 三丶 急速秒传 上传之前去拿到MD5唯一码去查数据如果已经有了文件就返回给
layui详细文件上传（前后台）
热门推荐
顽强的化石的博客
12-23 1万+
文件上传这个功能是做网站必不可少的，layui中的文件上传还是挺不错的，简单实用 1、form表单进行文件上传，中间表单内容我就省略了，注意：enctype设为multipart/form-data <form class="layui-form layui-form-pane" id="addgoods" style="padding: 15px;display: none" enctype="multipart/form-data" > <i
layui实现文件压缩上传_tp5+layui 实现上传大文件
weixin_39609887的博客
12-29 853
前言：之前所写的文件上传类通常进行考虑的是文件的类型、大小是否符合要求条件。当上传大文件时就要考虑到php的配置和服务器的配置问题。之前简单的觉得只要将php.ini中的表单上传的 大小，单脚本执行的最大时间都配 大就行了。显然这是很小白吃的做法。这样改完之后页面及服务器还是会崩溃。差不多几百兆这样吧。所以查阅资料，采用将大文件分割上传的方式来解决。这里进行记录下。内容：首先记录下更改文件上传大小...
layui+腾讯云存储+app-info-parser.js实现自动解包并分片上传
m0_37961140的博客
08-25 434
<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多文件上传
SDJN_ONE的博客
01-18 2208
layui官方文档代码 <div class="layui-upload"> <button class="layui-btn layui-btn-normal" id="testList" type="button">选择文件</button> <div class="layui-upload-list"> <table class="layui-table"> <thead&gt
React+Antd+Upload实现大文件分片上传
fankeweiii的博客
08-08 1682
React+Antd+Upload实现大文件分片上传
oss 脚本上传 文件大小不对
05-20
如果你使用OSS的官方SDK上传文件，它会自动计算文件大小并上传。如果你使用脚本上传文件，可能是因为你在上传时没有正确设置文件大小，导致文件大小不正确。 你可以通过以下方法来解决这个问题： 1. 检查你上传文件的脚本，确保你正确设置了文件大小参数。 2. 如果你使用的是Linux系统，可以使用以下命令获取文件大小：`stat -c "%s" filename`，其中filename是你要上传的文件名。 3. 如果你使用的是Windows系统，可以使用以下命令获取文件大小：`for %I in (filename) do @echo %~zI`，其中filename是你要上传的文件名。 无论你使用哪种方法，都要确保你上传的文件大小是正确的。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值