Foreword
Do seven cattle cloud storage, but also change Ali cloud oss. . . Hey. . .
Record about the process. This uses a server to generate the signature. Direct web end manner. Did not set a callback
First, the preparatory work
View Manual:
Several key manual page:
1, the server the signed forward pass
2, PHP code examples
. 3, PostObject the API described
Second, the principle
1, the user sends a request to the application server to upload Policy.
2, application server returns the user to upload Policy and signature.
3, the user directly upload data to the OSS
(my signature is generated directly to the web page)
Third, begin to develop
Download the official php demo.
Open demo to get.php, as shown in FIG.
Visible is our own oss enter some configuration information, and then return reponse array. I understand the signature reponse this array is returned.
The above configuration information can be written to the database, and then read from the database. .
E.g:
Fourth, the back-end code:
It uses thinkphp5 framework development.
From the configuration database which is read out, and then the above demo copy of the code, returns an array of reponse to the front end.
Here are two upload files. To a common bucket, to a private bucket. and so. reponse array will be more than a few parameters.
public function oss_addStep(){
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";
}
$ossData = Db::name('oss_setting')->find();
if(!$ossData){
$this->error('请先配置OSS配置');
}
$id = $ossData['access_key'];
$key = $ossData['secret_key'];
// $id= '<yourAccessKeyId>'; // 请填写您的AccessKeyId。
// $key= '<yourAccessKeySecret>'; // 请填写您的AccessKeySecret。
$bucket1 = $ossData['bucket1'];
$bucket2 = $ossData['bucket2'];
$domain1 = $ossData['domain1'];
$domain2 = $ossData['domain2'];
// $host的格式为 bucketname.endpoint，请替换为您的真实信息。
$host1 = 'http://'.$bucket1.'.'.$domain1;
$host2 = 'http://'.$bucket2.'.'.$domain2;
// $callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实URL信息。
$dir1 = '';
$dir2 = ''; // 用户上传文件时指定的前缀。;
$now = time();
$expire = 100; //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问。
$end = $now + $expire;
$expiration = gmt_iso8601($end);
//最大文件大小.用户可以自己设置
$condition = array(0=>'content-length-range', 1=>0, 2=>1048576000);
$conditions[] = $condition;
// 表示用户上传的数据，必须是以$dir开始，不然上传会失败，这一步不是必须项，只是为了安全起见，防止用户通过policy上传到别人的目录。
$start = array(0=>'starts-with', 1=>'$key', 2=>$dir1);
$conditions[] = $start;
$arr = array('expiration'=>$expiration,'conditions'=>$conditions);
$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));
$condition2 = array(0=>'content-length-range', 1=>0, 2=>1048576000);
$conditions2[] = $condition2;
$start2 = array(0=>'starts-with', 1=>'$key', 2=>$dir2);
$conditions2[] = $start2;
$arr2 = array('expiration'=>$expiration,'conditions'=>$conditions2);
$policy2 = json_encode($arr2);
$base64_policy2 = base64_encode($policy2);
$string_to_sign2 = $base64_policy2;
$signature2 = base64_encode(hash_hmac('sha1', $string_to_sign2, $key, true));
$response = array();
$response['accessid'] = $id;
$response['host1'] = $host1;
$response['host2'] = $host2;
$response['policy'] = $base64_policy;
$response['policy2'] = $base64_policy2;
$response['signature'] = $signature;
$response['signature2'] = $signature2;
$response['expire'] = $end;
$response['dir1'] = $dir1; // 这个参数是设置用户上传文件时指定的前缀。
$response['dir2'] = $dir2; // 这个参数是设置用户上传文件时指定的前缀。
$this->assign('response',$response);
return $this->fetch();
}Fifth, the front-end code:
Bucket must be set up cross-domain rules.
Permission to open post
The array parameter reponse to render the template.
As for why write it. . Please look official Ali cloud API PostObject
<form action=" method="post" class="ajaxForm2" id="form1">
<input type="hidden" name="OSSAccessKeyId" id="accessid" value="{$response.accessid}">
<input type="hidden" name="policy" id="policy" value="{$response.policy}">
<input type="hidden" name="signature" id="signature" value="{$response.signature}">
<input type="hidden" name="expire" id="expire" value="{$response.expire}">
<input type="hidden" name="success_action_status" id="success_action_status" value="200">
<input type="hidden" name="key" id="key1_name" value="">
<input type="file" style="display: none;" name="file" id="file1" value="" class="" >
</form>
<form action="" method="post" class="ajaxForm2" id="form2">
<input type="hidden" name="OSSAccessKeyId" id="accessid" value="{$response.accessid}">
<input type="hidden" name="policy" id="policy" value="{$response.policy2}">
<input type="hidden" name="signature" id="signature" value="{$response.signature2}">
<input type="hidden" name="expire" id="expire" value="{$response.expire}">
<input type="hidden" name="success_action_status" id="success_action_status" value="200">
<input type="hidden" name="key" id="key2_name" value="">
<input type="file" style="display: none;" name="file" id="file2" value="" class="" />
</form>The effect is as:
ajax part:
$.ajax({
url : '{$response.host1}',
type : 'post',
data : new FormData($('#form1')[0]),
dataType:'XML',
processData: false,
contentType: false,
error:function(xml){
console.log(xml.responseText);
layer.msg('上传失败');
},
success:function(){
$("#key1").val(key_name);
$("#up_key1").val(key_name);
layer.msg('上传成功');
}
})