laravel 實(shí)現(xiàn)阿里云oss文件上傳功能的示例
1、定義路由
// 阿里云文件儲(chǔ)存 Route::group(['prefix'=>'aliyun'], function(){ Route::get('sign', 'AliyunController@sign'); });
2、編寫(xiě) controller 層
/** * 返回OSS的簽名驗(yàn)證 * @return JSON 簽名信息 */ public function sign(Request $request) { //初始化一下必要的請(qǐng)求數(shù)據(jù) $id = 'xxx'; //AccessKeyId $key = 'xxx'; //AccessKeySecret $host = '//xxx.oss-cn-shenzhen.aliyuncs.com'; //OSS庫(kù)地址 $cdn_host = "http://img.xxx.com"; //真實(shí)的訪問(wèn)地址 $dir = 'test/'; //上傳目錄設(shè)置 $callbackUrl = url('upload/callback'); //上傳回調(diào)的地址 //上傳回調(diào)的參數(shù),callbackUrl地址,callbackBody回調(diào)接收的參數(shù),callbackBodyType通過(guò)POST調(diào)用的回調(diào)函數(shù),所以要設(shè)置這個(gè)頭 $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); //轉(zhuǎn)換成json格式 $base64_callback_body = base64_encode($callback_string); //要返回的回調(diào)函數(shù)參數(shù)信息 //設(shè)置過(guò)期時(shí)間 $now = time(); $expire = 60 * 60 * 2; //設(shè)置該policy超時(shí)時(shí)間是 2小時(shí). 即這個(gè)policy過(guò)了這個(gè)有效時(shí)間,將不能訪問(wèn),這里可以根據(jù)自己的token過(guò)期時(shí)間來(lái)設(shè)置 $end = $now + $expire; $expiration = $this->gmt_iso8601($end); //進(jìn)行時(shí)間格式的轉(zhuǎn)換 //處理上傳限制條件 //最大文件大小.用戶可以自己設(shè)置 $condition = array(0 => 'content-length-range', 1 => 0, 2 => 1048576000); $conditions[] = $condition; //設(shè)定文件大小 //表示用戶上傳的數(shù)據(jù),必須是以$dir開(kāi)始, 不然上傳會(huì)失敗,這一步不是必須項(xiàng),只是為了安全起見(jiàn),防止用戶通過(guò)policy上傳到別人的目錄 $start = array(0 => 'starts-with', 1 => '$key', 2 => $dir); $conditions[] = $start; //必須以設(shè)定的目錄開(kāi)頭,防止上傳錯(cuò)誤 $arr = array('expiration' => $expiration, 'conditions' => $conditions); $policy = json_encode($arr); $base64_policy = base64_encode($policy); //要返回的上傳限制參數(shù) //簽名信息 $string_to_sign = $base64_policy; $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true)); //要返回的簽名信息 //設(shè)置返回信息 $response = array( 'accessid' => $id, //accessid 'host' => $host, //上傳地址 'cdn_host' => $cdn_host, //真實(shí)的訪問(wèn)地址 'policy' => $base64_policy, //上傳文件限制 'signature' => $signature, //簽名信息 'expire' => $end, //失效時(shí)間 'callback' => $base64_callback_body, //上傳回調(diào)參數(shù) 'dir' => $dir //上傳的目錄 ); return response()->json([ 'code' => 0, 'msg' => 'success', 'data' => $response ]); } //格式化時(shí)間,格式為2020-07-07T23:48:43Z public function gmt_iso8601($time) { $dtStr = date("c", $time); $pos = strpos($dtStr, '+'); $expiration = substr($dtStr, 0, $pos); return $expiration . "Z"; }
3、查看接口返回
4、前端界面及操作編寫(xiě),這里采用的是 vue
<template> <div class="test" style="padding:100px 0px 1000px 0px;"> <div> <input type="file" id="file" name="file" /> <a @click="upload()" href="javascript:;" rel="external nofollow" >上傳</a> </div> </div> </template> <script> export default { data(){ return { } }, mounted() { this.getOssToken(); }, methods: { //獲取上傳通行證 getOssToken(){ var _self = this; this.axios.get('/aliyun/sign').then((res)=>{ var data = res.data; if(data.code==0){ _self.aliyunOssToken = data.data; }else{ _self.$message.warning(data.msg); } }); }, upload(){ var _self = this; var getSuffix = function (fileName) { var pos = fileName.lastIndexOf("."); var suffix = ''; if (pos != -1) { suffix = fileName.substring(pos); } return suffix; } var file = $("#file").val(); if (file.length == 0) { alert("請(qǐng)選擇文件"); } var oFileName = file.lastIndexOf('\\'); var oFileName = file.substr(oFileName+1); var fileName = oFileName.lastIndexOf('.'); var fileName = oFileName.substr(0,fileName); console.log(fileName); var filename = new Date().getTime() + getSuffix(file); var formData = new FormData(); //注意formData里append添加的鍵的大小寫(xiě) formData.append('key', _self.aliyunOssToken.dir + filename); //存儲(chǔ)在oss的文件路徑 formData.append('OSSAccessKeyId', _self.aliyunOssToken.accessid); //accessKeyId formData.append('policy', _self.aliyunOssToken.policy); //policy formData.append('Signature', _self.aliyunOssToken.signature); //簽名 formData.append("file", $("#file")[0].files[0]); formData.append('success_action_status', 200); //成功后返回的操作碼 var url = _self.aliyunOssToken.host; var fileUrl = _self.aliyunOssToken.cdn_host +'/'+ _self.aliyunOssToken.dir + filename; $.ajax({ url: url, type: 'POST', data: formData, // async: false, cache: false, contentType: false, processData: false, success: function (data) { console.log(fileUrl); console.log(data); }, error: function (data) { console.log(data); } }); } } } </script>
5、點(diǎn)擊上傳按鈕,瀏覽器控制臺(tái)輸出鏈接,訪問(wèn)該鏈接,即可看到該圖片
到此這篇關(guān)于laravel 實(shí)現(xiàn)阿里云oss文件上傳功能的示例的文章就介紹到這了,更多相關(guān)laravel 阿里云oss文件上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解
這篇文章主要介紹了WordPress后臺(tái)中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解,包括多個(gè)圖片上傳表單功能的實(shí)現(xiàn),需要的朋友可以參考下2016-01-01PHP的switch判斷語(yǔ)句的“高級(jí)”用法詳解
這篇文章主要介紹了PHP的switch判斷語(yǔ)句的“高級(jí)”用法詳解,其實(shí)本文講解的還是它的基礎(chǔ)用法,需要的朋友可以參考下2014-10-10DEDECMS首頁(yè)調(diào)用圖片集里的多張圖片
本文給大家分享的是織夢(mèng)系統(tǒng)中首頁(yè)調(diào)用圖片集里的多張圖片的方法,有相同需要的小伙伴可以參考下。2015-06-06thinkPHP框架中l(wèi)ayer.js的封裝與使用方法示例
這篇文章主要介紹了thinkPHP框架中l(wèi)ayer.js的封裝與使用方法,結(jié)合實(shí)例形式分析了thinkPHP中調(diào)用layer.js的具體操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-01-01php實(shí)現(xiàn)簡(jiǎn)單的權(quán)限管理的示例代碼
本篇文章主要介紹了php實(shí)現(xiàn)簡(jiǎn)單的權(quán)限管理的示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08