Laravel 项目使用阿里云对象存储 OSS 上传
当你要做一个视屏网站， 那么我们当然不会选择将视屏存储到自己的服务器上，因为视频的 Size 灰常 Big ，那么这种情况下都走咱们服务器带宽的话，会造成当你打开一个网站同时种一朵花，可能花会先开……你懂我的意思，如果你自己配置存储视屏的服务器，带宽也会十分浪费；所以我们可以使用一些现有的云存储，那么我们在 Laravel 这个视屏项目中，我们选择阿里云 OSS 来处理。下面我们就来聊聊整体流程……
一、开通阿里云 OSS
a) 新建 OSS ，进入到 OSS 管理控制台
友情提示：在阿里云存入1-2元钱，以免播放没钱，不能播放了。
b) 开通 OSS
- 新建块 Bucket ，选择
公共读； - 基础设置 -> 跨域设置 -> 创建规则 -> 来源为
*，允许 Methods：全部勾选上，允许 Headers：也设置为 * ； - 鼠标移动右上角的用户名，点击
访问控制； - 到
访问控制控制台，点击用户管理，然后新建用户，勾选下面的【为改用自动生成 AccessKey 】，然后保存 AccessKey ； - 找到用户
授权，让其拥有操作 OSS 的权限( AliyunOSSFullAccess 管理开放存储服务(OSS)权限)； - 再次进入OSS控制台，找到
外网域名和块的名称复制保存。
二、测试代码
a) 建立 Oss 管理控制器
php artisan make:controller Component/OssControllerb) 配置路由
Route::any('/component/oss', 'Component\OssController@sign');c) 使用 HDJS
打开 HDJS 手册，复制手册中的 sign 方法到 OssController 中，注意把 static 去掉，然后设置信息，复制如下代码做测试。
前台代码：
<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">
<input type="hidden" name="file" class="form-control">
<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: '{{asset('/component/oss')}}?',
//上传目录
dir: 'file/',
//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 = "http://laravel-video-oss.oss-cn-beijing.aliyuncs.com/" + file.name;
$("[name='file']").attr('type','text');
$("[name='file']").val(file.name);
$('h1').html('<span style="color: #5FB760">上传成功</span>');
// $('.thumbnail img').attr('src', file.name);
},
error: function (up, file, info) {
alert(info.response);
}
}
});
})
</script>
后台代码：
class OssController extends Controller
{
//生成供前台使用的签名
public function sign()
{
//阿里云 AccessKeyId
$id = '**********';
//阿里云 AccessKeySecret
$key = '********************';
//OSS外网域名: 在阿里云后台OSS bucket中查看
$host = 'http://******.oss-cn-qingdao.aliyuncs.com';
//oss中本次上传存放文件的目录
$dir = $_GET['dir'];
function gmt_iso8601($time)
{
$dtStr = date("c", $time);
$mydatetime = new \DateTime($dtStr);
$expiration = $mydatetime->format(\DateTime::ISO8601);
$pos = strpos($expiration, '+');
$expiration = substr($expiration, 0, $pos);
return $expiration."Z";
}
$now = time();
$expire = 30; //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问
$end = $now + $expire;
$expiration = gmt_iso8601($end);
//最大文件大小.用户可以自己设置
$condition = [0 => 'content-length-range', 1 => 0, 2 => 1048576000];
$conditions[] = $condition;
//表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录
$start = [0 => 'starts-with', 1 => '$key', 2 => $dir];
$conditions[] = $start;
$arr = ['expiration' => $expiration, 'conditions' => $conditions];
//return;
$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 = [];
$response['accessid'] = $id;
$response['host'] = $host;
$response['policy'] = $base64_policy;
$response['signature'] = $signature;
$response['expire'] = $end;
//这个参数是设置用户上传指定的前缀
$response['dir'] = $dir;
return json_encode($response);
}
}
d) 测试成功
链接地址：http://laravel-video-oss.oss-cn-beijing.aliyuncs.com/file/FiM2KHYfZ3.jpeg
Finally，谢谢大家的阅读！祝每天开心~
版权声明：本文为博主原创文章，未经博主允许不得转载。
微信赞赏
支付宝赞赏
发表评论