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