阿里云分片上传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"></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>
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。