阿里云分片上传oss和前端页面

    //构建一个阿里云客户端，用于发起请求。
    //构建阿里云客户端时需要设置AccessKey ID和AccessKey Secret。
    public function audioUpload()
    {
        AlibabaCloud::accessKeyClient('xxxxxx', 'xxxxx')
            ->regionId('cn-hangzhou')
            ->asDefaultClient();
        //设置参数，发起请求。
        try {
            $result = AlibabaCloud::rpc()
                ->product('Sts')
                ->scheme('https') // https | http
                ->version('2015-04-01')
                ->action('AssumeRole')
                ->method('POST')
                ->host('sts.aliyuncs.com')
                ->options([
                    'query' => [
                        'RegionId' => 'cn-hangzhou',
                        'RoleArn' => 'acs:ram::1303559061001342:role/0816',
                        'RoleSessionName' => 'longge@1303559061001342.onaliyun.com',
                    ],
                ])
                ->request();
            $result = $result->toArray();
            $result['Credentials']['img_url'] = 'https://niubi20220816.oss-cn-hangzhou.aliyuncs.com';
            return json(['code'=>0,'msg'=>'上传成功','data'=>$result['Credentials']]);
        } catch (ClientException $e) {
            return json(['code'=>1,'msg'=>$e->getErrorMessage()]);
        } catch (ServerException $e) {
            return json(['code'=>1,'msg'=>$e->getErrorMessage()]);
        }
    }

后端PHP接口 audioUpload，前端页面 layui 直接发起请求

<div class="layui-form-item id="video_box" >
    <label class="layui-form-label">视频/音频</label>
    <div class="layui-input-block">
       <button type="button" class="layui-btn layui-btn-primary videoBtn" ><i class="layui-icon">&#xe67c;</i>视频上传</button>
       <input type="hidden" value="{$info['video_url']}" id="url" name="info[video_url]" lay-verify="">
       <div class="layui-inline layui-word-aux">
          <span id="show-url"></span>
       </div>
       <div class="progress-box">
          <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="progressBar">
             <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
          </div>
       </div>
    <video src="{$info['video_url']}" controls="controls" class="video" id="video55555"> 您的浏览器不支持 video 标签。 </video>
    </div> 
</div>

<video id="myvideo" style="display:none"></video>

<script type="text/javascript" src="




<script>
	layui.use('upload', function(){
		var upload = layui.upload,
		element = layui.element;
		element.init();
		var loadingIndex;
		//上传视频
		upload.render({
			elem: '.videoBtn',
			accept:'video',
			progress: function(e , percent) {
				console.log("进度：" + percent + '%');
			},
			before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
				//loading层
				var type = 2;
				$("#type").val(type);
				loadingIndex = layer.load(2, { //icon支持传入0-2
					shade: [0.5, '#000'], //0.5透明度的灰色背景
					content: '上传中...',
					success: function (layero) {
						layero.find('.layui-layer-content').css({
							'padding-top': '39px',
							'width': '60px'
						});
					}
				});

			},
			choose:function(obj){
				obj.preview(function (index, file, result1) {
					var size = file.size;
					if (size > 5000 * 1024 *1024){
						layer.msg('上传的视频不能超过5G', {icon: 5});
						layer.close(loadingIndex);
						return false;
					}
					$.get("{:url('/base/audioUpload')}", function(result){
						if (result.code == 0) {
							multipleUpload(result.data,file);
						}else{
							layer.msg(result.msg, {icon: 5});
						}
					});

				});
			},
			error: function(){
				layer.msg('上传失败', {icon:5,time: 1500});
				layer.close(loadingIndex);
			}
		});

		function multipleUpload(result,file){
			console.log('result', result)
			console.log('file', file)
			var ossConfig = {
				// yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
				region:'oss-cn-hangzhou',
				// 从STS服务获取的临时访问凭证。临时访问凭证包括临时访问密钥（AccessKeyId和AccessKeySecret）和安全令牌（SecurityToken）。
				accessKeyId: result.AccessKeyId,
				accessKeySecret: result.AccessKeySecret,
				stsToken: result.SecurityToken,
				// 填写Bucket名称。
				bucket:'niubi20220816'
			};


			// 开始分片上传。
			multipartUpload(ossConfig,file,result.img_url);

		}


		let tempCheckpoint;
		let progressNumber;

		// 定义上传方法。
		async function multipartUpload (ossconfig,file,img_url) {
			try {
				var retryCount = 0;
				var retryCountMax = 3;
				// 填写Object完整路径和本地文件的完整路径。Object完整路径中不能包含Bucket名称。
				// 您可以通过自定义文件名（例如exampleobject.txt）或目录（例如mytestdoc/exampleobject.txt）的形式，实现将文件上传到当前Bucket或Bucket中的指定目录。
				// 如果未指定本地路径，则默认从示例程序所属项目对应本地路径中上传文件。
				var client = new OSS(ossconfig);
				var filename = file.name;
				var str_to_arr = filename.split('.');
				var ext = str_to_arr[1];
				var str = new Date().getTime();

				var object = "zyb/recreation_audio/"+Math.random().toString(36).slice(-8)+str+"."+ext;
				//简单上传
				// var result = await client.put(object, file);
				// 分片上传
				var result = await client.multipartUpload(object, file, {
					progress: function (p, checkpoint) {
						// 断点记录点。浏览器重启后无法直接继续上传，您需要手动触发上传操作。
						tempCheckpoint = checkpoint;
						progressNumber = (p * 100).toFixed(2) ;
						element.progress('progressBar',progressNumber  + '%');

						console.log(p)
					},
					partSize: 1024 * 1024,
					timeout: 120000,
					meta: { year: 2020, people: 'test' },
				})
				if(result.res.status == 200){
					$('#audio').attr('src',img_url+'/'+result.name);
					$('#url').val(img_url+'/'+result.name);
					$('#show-url').text(img_url+'/'+result.name);
					$('#video55555').attr('src',img_url+'/'+result.name);
					layer.msg("上传成功", {icon:6,time: 1500});
					layer.close(loadingIndex);

				}else{
					layer.msg('上传失败', {icon:5,time: 1500});
					layer.close(loadingIndex);

				}


			} catch(e){
				if (retryCount < retryCountMax){
					retryCount++;
					multipartUpload(ossconfig,file,img_url);
				}
			}
		}
	});
</script>