1、定義路由
|
1
2
3
4
|
// 阿里云文件儲存Route::group(['prefix'=>'aliyun'], function(){ Route::get('sign', 'AliyunController@sign');}); |
2、編寫 controller 層
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
/** * 返回OSS的簽名驗證 * @return JSON 簽名信息 */ public function sign(Request $request) { //初始化一下必要的請求數據 $id = 'xxx'; //AccessKeyId $key = 'xxx'; //AccessKeySecret $host = '//xxx.oss-cn-shenzhen.aliyuncs.com'; //OSS庫地址 $cdn_host = "//img.xxx.com"; //真實的訪問地址 $dir = 'test/'; //上傳目錄設置 $callbackUrl = url('upload/callback'); //上傳回調的地址 //上傳回調的參數,callbackUrl地址,callbackBody回調接收的參數,callbackBodyType通過POST調用的回調函數,所以要設置這個頭 $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); //轉換成json格式 $base64_callback_body = base64_encode($callback_string); //要返回的回調函數參數信息 //設置過期時間 $now = time(); $expire = 60 * 60 * 2; //設置該policy超時時間是 2小時. 即這個policy過了這個有效時間，將不能訪問，這里可以根據自己的token過期時間來設置 $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( 'accessid' => $id, //accessid 'host' => $host, //上傳地址 'cdn_host' => $cdn_host, //真實的訪問地址 'policy' => $base64_policy, //上傳文件限制 'signature' => $signature, //簽名信息 'expire' => $end, //失效時間 'callback' => $base64_callback_body, //上傳回調參數 'dir' => $dir //上傳的目錄 ); return response()->json([ 'code' => 0, 'msg' => 'success', 'data' => $response ]); } //格式化時間,格式為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、前端界面及操作編寫，這里采用的是 vue
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
<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("請選擇文件"); } 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添加的鍵的大小寫 formData.append('key', _self.aliyunOssToken.dir + filename); //存儲在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、點擊上傳按鈕，瀏覽器控制臺輸出鏈接，訪問該鏈接，即可看到該圖片
到此這篇關于laravel 實現阿里云oss文件上傳功能的示例的文章就介紹到這了,更多相關laravel 阿里云oss文件上傳內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://www.cnblogs.com/zion0707/p/12118661.html
