# 阿里云OSS [TOC] ## 后臺 ### 安裝組件 請先安裝 [阿里云OSS](https://github.com/houdunwang/oss) 后臺管理組件，并參考文檔正確配置。 ### 生成簽名 使用簽名可以安全的實現上傳，并保護阿里云帳號信息。 ``` echo \houdunwang\oss\Oss::sign(); ``` ## 前臺 ``` <div id="container"> <div class="row"> <h1 class="text-center"></h1> <div class="input-group"> <input type="text" name="file" class="form-control" aria-label="Recipient's username" aria-describedby="basic-addon2"> <div class="input-group-append"> <button class="btn btn-outline-secondary" type="button" id="selectfiles">選擇文件</button> <button class="btn btn-outline-secondary" type="button" id="postfiles">開始上傳</button> </div> </div> </div> </div> <script> require(['oss', 'bootstrap'], function (oss) { oss.upload({ //容器 container: 'container', //文件選擇按鈕 pick: 'selectfiles', //開始上傳按鈕 upButton: 'postfiles', //獲取簽名 serverUrl: '/test/php/ossSign.php?', //上傳目錄 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: '10000mb', //不允許選取重復文件 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) { $("[name='file']").val(file.name); $("h1").remove(); }, error: function (up, file, info) { alert(info.response); } } }); }) </script> ```