# 阿里云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> ```