TP6 阿里云OSS（请求服务端签名，客户端直传）
插件合集
下载地址
http://gosspublic.alicdn.com/doc/oss-h5-upload-js-direct.zip?spm=a2c4g.11186623.2.11.4a383bd3mBCqlZ&file=oss-h5-upload-js-direct.zip
基类
<?php /** * Created by PhpStorm. * User: 张永峰 * Date: 2021/3/2 * Time: 9:55 * ━━━━━━━━━神兽出没━━━━━━━━━ * ┏┓ ┏┓+ + * ┏┛┻━━━┛┻┓ + + * ┃ ┃ * ┃ ━ ┃ ++ + + + * ████━████ ┃+ * ┃ ┃ + * ┃ ┻ ┃ * ┃ ┃ + + * ┗━┓ ┏━┛ * ┃ ┃ * ┃ ┃ + + + + * ┃ ┃ Code is far away from bug with the animal protecting * ┃ ┃ + 神兽保佑,代码无bug * ┃ ┃ * ┃ ┃ + * ┃ ┗━━━┓ + + * ┃ ┣┓ * ┃ ┏┛ * ┗┓┓┏━┳┓┏┛ + + + + * ┃┫┫ ┃┫┫ * ┗┻┛ ┗┻┛+ + + + * ━━━━━━━━━感觉萌萌哒━━━━━━━━━ */ namespace zyf; /** * @title 阿里云OSS存储签名 * Class Osss * @package zyf * @Date : 2021/3/2 * @Time : 9:55 */ class Osss { public function gmt_iso8601($time) { $expiration = date(DATE_ISO8601, $time); $pos = strpos($expiration, '+'); $expiration = substr($expiration, 0, $pos); return $expiration."Z"; } public function signedUrl() { $key = config('oss.main.AccessKeySecret'); $callbackUrl = config('oss.main.callbackUrl'); $dir = config('oss.main.dir'); $callback_param = array( 'callbackUrl' => $callbackUrl, 'callbackBody' => 'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}', 'callbackBodyType' => "application/x-www-form-urlencoded"); $callback_string = json_encode($callback_param); $base64_callback_body = base64_encode($callback_string); $now = time(); $expire = 3000; // 设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问。 $end = $now + $expire; $expiration = $this->gmt_iso8601($end); //最大文件大小.用户可以自己设置 $condition = array(0 => 'content-length-range', 1 => 0, 2 => 1048576000); $conditions[] = $condition; // 表示用户上传的数据，必须是以$dir开始，不然上传会失败，这一步不是必须项，只是为了安全起见，防止用户通过policy上传到别人的目录。 $start = array(0 => 'starts-with', 1 => '$key', 2 => $dir); $conditions[] = $start; $arr = array('expiration' => $expiration,'conditions' => $conditions); $policy = json_encode($arr); $base64_policy = base64_encode($policy); $string_to_sign = $base64_policy; $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true)); $response = array(); $response['accessid'] = config('oss.main.AccessKeyId'); $response['host'] = config('oss.main.host'); $response['policy'] = $base64_policy; $response['signature'] = $signature; $response['expire'] = $end; $response['callback'] = $base64_callback_body; $response['dir'] = $dir; // 这个参数是设置用户上传文件时指定的前缀。 return $response; } }
后台
// OSS public function oss() { if (IS_POST) { $oss = new \zyf\Osss(); return json($oss->signedUrl()); } return $this->render(); }
前端
<link rel="stylesheet" href="__COMMON__/oss/style.css"> <div class="layui-form-item"> <label class="layui-form-label">上传文件：</label> <div class="layui-input-block"> <h4>您所选择的文件列表：</h4> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div> <br/> <div id="container"> <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a> <a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a> </div> <pre id="console"></pre> <p> </p> </div> </div> <script type="text/javascript" src="__COMMON__/oss/lib/plupload-2.1.2/js/plupload.full.min.js"></script> <script type="text/javascript" src="__COMMON__/oss/upload.js"></script>
JS
把下载的包中的uoload.js修改
修改send_request中的serverUrl
修改new plupload.Uploader中引入静态资源的路径
accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = '' key = '' expire = 0 g_object_name = '' g_object_name_type = '' now = timestamp = Date.parse(new Date()) / 1000; function send_request() { var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { // serverUrl是 用户获取 '签名和Policy' 等信息的应用服务器的URL，请将下面的IP和Port配置为您自己的真实信息。 // serverUrl = '666.com/common/Osss/signedUrl' // serverUrl = './php/get.php' xmlhttp.open("POST", '', false) xmlhttp.send(null) return xmlhttp.responseText } else { alert("Your browser does not support XMLHTTP."); } } // 生成随机文件名 function check_object_radio() { g_object_name_type = 'random_name'; } // 获取签名 function get_signature() { // 可以判断当前expire是否超过了当前时间， 如果超过了当前时间， 就重新取一下，3s 作为缓冲。 now = timestamp = Date.parse(new Date()) / 1000; if (expire < now + 3) { body = send_request() var obj = eval("(" + body + ")") host = obj['host'] policyBase64 = obj['policy'] accessid = obj['accessid'] signature = obj['signature'] expire = parseInt(obj['expire']) callbackbody = obj['callback'] key = obj['dir'] return true; } return false; } // 随机字符串 function random_string(len) { len = len || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = chars.length; var pwd = ''; for (i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } // 获取文件后缀名 function get_suffix(filename) { pos = filename.lastIndexOf('.') suffix = '' if (pos != -1) { suffix = filename.substring(pos) } return suffix; } // 设置名称 function calculate_object_name(filename) { if (g_object_name_type == 'local_name') { g_object_name += "${filename}" } else if (g_object_name_type == 'random_name') { suffix = get_suffix(filename) g_object_name = key + random_string(10) + suffix } return '' } // 获取上传对象名称 function get_uploaded_object_name(filename) { if (g_object_name_type == 'local_name') { tmp_name = g_object_name tmp_name = tmp_name.replace("${filename}", filename); return tmp_name } else if (g_object_name_type == 'random_name') { return g_object_name } } // 设置上传参数 function set_upload_param(up, filename, ret) { if (ret == false) { ret = get_signature() } g_object_name = key; if (filename != '') { suffix = get_suffix(filename) calculate_object_name(filename) } new_multipart_params = { 'key' : g_object_name, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status' : '200', //让服务端返回200,不然，默认会返回204 'callback' : callbackbody, 'signature': signature, }; up.setOption({ 'url': host, 'multipart_params': new_multipart_params }); up.start(); } var uploader = new plupload.Uploader({ runtimes: 'html5,flash,silverlight,html4', browse_button: 'selectfiles', container: document.getElementById('container'), flash_swf_url: '/static/common/oss/lib/plupload-2.1.2/js/Moxie.swf', silverlight_xap_url: '/static/common/oss/ossupload/lib/plupload-2.1.2/js/Moxie.xap', url: 'http://oss.aliyuncs.com', autostart: true, multi_selection: false, //是否支持多文件选择 init: { PostInit: function () { document.getElementById('postfiles').onclick = function () { set_upload_param(uploader, '', false); return false; }; }, FilesAdded: function (up, files) { plupload.each(files, function (file) { // 文件信息 document.getElementById('ossfile').innerHTML = '<input type="hidden" name="filename" value="' + file.name + '"><input type="hidden" name="filesize" value="' + plupload.formatSize(file.size) + '"><div class="onlyfile" data-id="' + file.id + '" id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' + '<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>' + '</div>'; }); }, BeforeUpload: function (up, file) { check_object_radio(); set_upload_param(up, file.name, true); }, UploadProgress: function (up, file) { var fileid = $('.onlyfile').data('id') var d = document.getElementById(fileid); d.getElementsByTagName('b')[0].innerHTML = '<span class="upspeed">' + file.percent + "%</span>"; var prog = d.getElementsByTagName('div')[0]; var progBar = prog.getElementsByTagName('div')[0] progBar.style.width = 2 * file.percent + 'px'; progBar.setAttribute('aria-valuenow', file.percent); }, FileUploaded: function (up, file, info) { if (info.status == 200) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name) + ' 回调服务器返回的内容是:' + info.response; } else if (info.status == 203) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传到OSS成功，但是oss访问用户设置的上传回调服务器失败，失败原因是:' + info.response; } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } }, Error: function (up, err) { if (err.code == -600) { document.getElementById('console').appendChild(document.createTextNode("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小")); } else if (err.code == -601) { document.getElementById('console').appendChild(document.createTextNode("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型")); } else if (err.code == -602) { document.getElementById('console').appendChild(document.createTextNode("\n这个文件已经上传过一遍了")); } else { document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response)); } } } }) uploader.init();
