## 阿里云OSS 本服務用于管理阿里云OSS, 考阿里云 [OSS參考文檔](https://help.aliyun.com/document_detail/32103.html?spm=5176.doc32099.6.748.85Qz6b) 組件是對阿里云 [官方SDK](https://help.aliyun.com/document_detail/31926.html?spm=a2c4g.11186623.6.632.Ln6Krc) 進行封裝。 使用composer安裝組件，查看 [OSS組件庫源碼](https://github.com/houdunwang/oss) [TOC] ## 配置 配置使用了 [Config組件](https://packagist.org/packages/houdunwang/config) 加載配置項Config::loadFiles('config') 為配置文件所在目錄。 配置需要 aliyun.php 與 oss.php 兩個文件，也可以使用Config服務直接加載數組。 設置 Aliyun 配置 ``` Config::set('aliyun',[ /* |-------------------------------------------------------------------------- | 根據服務器所在區域進行選擇 | https://help.aliyun.com/document_detail/40654.html?spm=5176.7114037.1996646101.1.OCtdEo */ 'regionId' => 'cn-hangzhou', /* |-------------------------------------------------------------------------- | 如果使用主賬號訪問，登陸阿里云 AccessKey 管理頁面創建、查看 | 如果使用子賬號訪問，請登錄阿里云訪問控制控制臺查看 */ 'accessId' => '', /* |-------------------------------------------------------------------------- | 如果使用主賬號訪問，登陸阿里云 AccessKey 管理頁面創建、查看 | 如果使用子賬號訪問，請登錄阿里云訪問控制控制臺查看 */ 'accessKey' => '', ]); ``` 設置OSS配置 ``` Config::set('oss',[ /* |-------------------------------------------------------------------------- | Bucket塊名稱 |-------------------------------------------------------------------------- | https://oss.console.aliyun.com/index */ 'bucket' => '', /* |-------------------------------------------------------------------------- | 外網Endpoint |-------------------------------------------------------------------------- | 登錄阿里云后臺查看,可以設置阿里云提供的公共域名，也可以使用自定義域名。 | 如果使用自定義域名，需要將下面的 "自定義域名" 設置為 true */ 'endpoint' => '', /* |-------------------------------------------------------------------------- | 訪問域名 |-------------------------------------------------------------------------- | 登錄阿里云塊設置中查看 */ 'host' => '' ]); ``` ## 生成簽名 安裝oss 組件 [https://packagist.org/packages/houdunwang/oss](https://packagist.org/packages/houdunwang/oss) ``` //參數為塊目錄 echo \houdunwang\oss\Oss::sign('houdunren'); ``` ## 前臺使用  ``` <div id="container"> <div class="row"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src=""> <h1 class="text-center"></h1> <div class="caption"> <div class="btn-group"> <button type="button" class="btn btn-default" id="selectfiles">選擇文件 </button> <button type="button" class="btn btn-default" id="postfiles">開始上傳 </button> </div> </div> </div> </div> </div> </div> <script> require(['oss'], function (oss) { var uploader = oss.upload({ //容器 container: 'container', //文件選擇按鈕 pick: 'selectfiles', //開始上傳按鈕 upButton: 'postfiles', //獲取簽名 serverUrl: '{!! u("component/oss/sign",["m"=>Request::get("m"),"siteid"=>siteid()]) !!}', //上傳目錄 dir: 'houdunren/', //local_name本地文件名 random_name隨機文件名 name_type: 'random_name', //允許上傳類型 filters: { //文件類型 mime_types: [ //只允許上傳圖片和zip,rar文件 {title: "Image files", extensions: "jpg,gif,png,bmp,jpeg"}, {title: "Zip files", extensions: "zip,rar"}, {title: "Video", extensions: "mp4"} ], //最大只能上傳10mb的文件 max_file_size: '10mb', //不允許選取重復文件 prevent_duplicates: true }, event: { //選擇文件 select: function (file) { $('h1').html('0%'); }, //開始上傳 start: function (up, file) { console.log('開始上傳'); }, progress: function (up, file) { //上傳進度 $('h1').html('<span>' + file.percent + "%</span>"); }, success: function (up, file, info) { file.name = "{!! \Config::get('oss.host') !!}/" + file.name; $("[name='file']").val(file.name); $('.thumbnail img').attr('src', file.name); }, error: function (up, file, info) { alert(info.response); } } }); }) </script> ```