阿里云OSS前端直接上传（服务端签名直传并设置上传回调）

前端直传文件到OSS的好处是减轻后台服务器的中转压力，但是前往不能使用明文直传的模式，否则可能被盗取appkey和appsecretkey（可参考我之前这篇文章：https://ranjuan.cn/get-aliyun-oss-appkeysecret/）

本文介绍采前端根据从服务器（后端使用的是php7.1 ）获取policy、accessid、signature，直接提交上传到阿里云oss服务器，上传成功后会回调你配置的回调地址，实现后台将oss地址存入数据库的方法。

1实现的流程大致如下：
21、index.html中upload.js -->  访问get.php返回授权票据信息
32、upload.js根据返回的信息，直传文件到阿里云oss
43、阿里云oss服务器收到请求后，将前端的传过来的文件进行存储，并将一起传过来的callback参数回调到callback.php
54、callback.php对回调参数进行解密等处理并返回阿里oss处理结果
65、阿里oss将收到的处理结果返回给index.html
76、index.html显示上传成功

下面附部分源码：

index.html(http://ranjuan.cn/AliOSS_test/js-oss-service/index.html)

 1<!DOCTYPE html>
 2<html>
 3<head>
 4	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
 5	<title>OSS web直传</title>
 6	<link rel="stylesheet" type="text/css" href="style.css"/>
 7	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 8</head>
 9<body>
10<h2>OSS web直传---在服务端php签名, OSS会在文件上传成功，回调用户设置的回调url</h2>
11<ol>
12<li>基于plupload封装 </li>
13<li>支持html5,flash,silverlight,html4 等协议上传</li>
14<li>可以运行在PC浏览器，手机浏览器，微信</li>
15<li>签名在服务端(php)完成, 安全可靠, 推荐使用!</li>
16<li>显示上传进度条</li>
17<li>可以控制上传文件的大小,允许上传文件的类型,本例子设置了，只能上传jpg,png,gif结尾和zip,rar文件，最大大小是10M</li>
18<li>最关键的是，让你10分钟之内就能移植到你的系统，实现以上牛逼的功能！</li>
19<li>注意一点:bucket必须设置了Cors(Post打勾）,不然没有办法上传</li>
20<li>注意一点:此例子默认是上传到user-dir目录下面，这个目录的设置是在php/get.php, $dir变量!</li>
21<li>注意一点:把php/get.php里面的callbackUrl变量改成你自己的url</li>
22<li>注意一点:这里返回的success,是OSS已经回调应用服务器，应用服务已经返回200!</li>
23<li><a href="https://help.aliyun.com/document_detail/oss/practice/pc_web_upload/js_php_callback.html">点击查看详细文档</a></li>
24</ol>
25<br>
26<form name=theform>
27<input type="radio" name="myradio" value="local_name" checked=true/> 上传文件名字保持本地文件名字
28<input type="radio" name="myradio" value="random_name" /> 上传文件名字是随机文件名, 后缀保留
29</form>
30<h4>您所选择的文件列表：</h4>
31<div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
32<br/>
33<div id="container">
34	<a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a>
35	<a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>	
36</div>
37<pre id="console"></pre>
38<p> </p>
39</body>
40	<script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
41<script type="text/javascript" src="upload.js"></script>
42<!-- <script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script>
43<script type="text/javascript" src="upload.js"></script>-->
44</html>

upload.js

  1// http://ranjuan.cn/AliOSS_test/js-oss-service/upload.js
  2 
  3accessid = ''
  4accesskey = ''
  5host = ''
  6policyBase64 = ''
  7signature = ''
  8callbackbody = ''
  9filename = ''
 10key = ''
 11expire = 0
 12g_object_name = ''
 13g_object_name_type = ''
 14now = timestamp = Date.parse(new Date()) / 1000; 
 15 
 16function send_request()
 17{
 18    var xmlhttp = null;
 19    if (window.XMLHttpRequest)
 20    {
 21        xmlhttp=new XMLHttpRequest();
 22    }
 23    else if (window.ActiveXObject)
 24    {
 25        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 26    }
 27  
 28    if (xmlhttp!=null)
 29    {
 30        // serverUrl是 用户获取 '签名和Policy' 等信息的应用服务器的URL，请将下面的IP和Port配置为您自己的真实信息。
 31        // serverUrl = 'http://88.88.88.88:8888/aliyun-oss-appserver-php/php/get.php'
 32        //serverUrl = './php/get.php'
 33        serverUrl = './php/get.php'
 34		
 35        xmlhttp.open( "GET", serverUrl, false );
 36        xmlhttp.send( null );
 37        return xmlhttp.responseText
 38    }
 39    else
 40    {
 41        alert("Your browser does not support XMLHTTP.");
 42    }
 43};
 44//--------
 45 
 46 
 47function check_object_radio() {
 48    var tt = document.getElementsByName('myradio');
 49    for (var i = 0; i < tt.length ; i++ )
 50    {
 51        if(tt[i].checked)
 52        {
 53            g_object_name_type = tt[i].value;
 54            break;
 55        }
 56    }
 57}
 58 
 59function get_signature()
 60{
 61    // 可以判断当前expire是否超过了当前时间， 如果超过了当前时间， 就重新取一下，3s 作为缓冲。
 62    now = timestamp = Date.parse(new Date()) / 1000; 
 63    if (expire < now + 3)
 64    {
 65        body = send_request()
 66        var obj = eval ("(" + body + ")");
 67        host = obj['host']
 68        policyBase64 = obj['policy']
 69        accessid = obj['accessid']
 70        signature = obj['signature']
 71        expire = parseInt(obj['expire']) 
 72        callbackbody = obj['callback'] 
 73        key = obj['dir']
 74        return true;
 75    }
 76    return false;
 77};
 78 
 79function random_string(len) {
 80　　len = len || 32;
 81　　var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';   
 82　　var maxPos = chars.length;
 83　　var pwd = '';
 84　　for (i = 0; i < len; i++) {
 85    　　pwd += chars.charAt(Math.floor(Math.random() * maxPos));
 86    }
 87    return pwd;
 88}
 89 
 90function get_suffix(filename) {
 91    pos = filename.lastIndexOf('.')
 92    suffix = ''
 93    if (pos != -1) {
 94        suffix = filename.substring(pos)
 95    }
 96    return suffix;
 97}
 98 
 99function calculate_object_name(filename)
100{
101    if (g_object_name_type == 'local_name')
102    {
103        g_object_name += "${filename}"
104    }
105    else if (g_object_name_type == 'random_name')
106    {
107        suffix = get_suffix(filename)
108        g_object_name = key + random_string(10) + suffix
109    }
110    return ''
111}
112 
113function get_uploaded_object_name(filename)
114{
115    if (g_object_name_type == 'local_name')
116    {
117        tmp_name = g_object_name
118        tmp_name = tmp_name.replace("${filename}", filename);
119        return tmp_name
120    }
121    else if(g_object_name_type == 'random_name')
122    {
123        return g_object_name
124    }
125}
126 
127function set_upload_param(up, filename, ret)
128{
129    if (ret == false)
130    {
131        ret = get_signature()
132    }
133    g_object_name = key;
134    if (filename != '') { suffix = get_suffix(filename)
135        calculate_object_name(filename)
136    }
137    new_multipart_params = {
138        'key' : g_object_name,
139        'policy': policyBase64,
140        'OSSAccessKeyId': accessid, 
141        'success_action_status' : '200', //让服务端返回200,不然，默认会返回204
142        'callback' : callbackbody,
143        'signature': signature,
144    };
145 
146    up.setOption({
147        'url': host,
148        'multipart_params': new_multipart_params
149    });
150 
151    up.start();
152}
153//-------------
154 
155var uploader = new plupload.Uploader({
156//	runtimes : 'html5,flash,silverlight,html4',
157	browse_button : 'selectfiles', 
158    //multi_selection: false,
159	container: document.getElementById('container'),
160	flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf',
161	silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap',
162    url : 'http://oss.aliyuncs.com',
163 
164    filters: {
165        mime_types : [ //只允许上传图片和zip文件
166        { title : "Image files", extensions : "jpg,gif,png,bmp" }, 
167        { title : "Zip files", extensions : "zip,rar" }
168        ],
169        max_file_size : '10mb', //最大只能上传10mb的文件
170        prevent_duplicates : true //不允许选取重复文件
171    }
172    });
173	uploader.init(); //初始
174 
175	uploader.bind('PostInit',function(){
176	//	PostInit: function() {
177			document.getElementById('ossfile').innerHTML = '';
178			document.getElementById('postfiles').onclick = function() {
179			//	alert('xx');
180            set_upload_param(uploader, '', false);
181            return false;
182			};
183	});
184 
185	uploader.bind('FilesAdded',function(up,files){
186	
187			plupload.each(files, function(file) {
188				document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>'
189				+'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>'
190				+'</div>';
191			});
192	});
193 
194	uploader.bind('BeforeUpload',function(up,file){
195            check_object_radio();
196            set_upload_param(up, file.name, true);
197	});
198 
199	//绑定文件上传进度事件
200	uploader.bind('UploadProgress',function(up,file){
201			var d = document.getElementById(file.id);
202			d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
203            var prog = d.getElementsByTagName('div')[0];
204			var progBar = prog.getElementsByTagName('div')[0]
205			progBar.style.width= 2*file.percent+'px';
206			progBar.setAttribute('aria-valuenow', file.percent);
207	});
208 
209	uploader.bind('FileUploaded',function(up,file,info){
210		
211            if (info.status == 200)
212            {
213                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = 'upload to oss success, object name:' + get_uploaded_object_name(file.name) + ' 回调服务器返回的内容是:' + info.response;
214            }
215            else if (info.status == 203)
216            {
217                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '上传到OSS成功，但是oss访问用户设置的上传回调服务器失败，失败原因是:' + info.response;
218            }
219            else
220            {
221                document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response;
222            } 
223	});
224 
225	uploader.bind('Error',function(up,err){
226	//	Error: function(up, err) {
227            if (err.code == -600) {
228                document.getElementById('console').appendChild(document.createTextNode("\n选择的文件太大了,可以根据应用情况，在upload.js 设置一下上传的最大大小"));
229            }
230            else if (err.code == -601) {
231                document.getElementById('console').appendChild(document.createTextNode("\n选择的文件后缀不对,可以根据应用情况，在upload.js进行设置可允许的上传文件类型"));
232            }
233            else if (err.code == -602) {
234                document.getElementById('console').appendChild(document.createTextNode("\n这个文件已经上传过一遍了"));
235            }
236            else 
237            {               document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response));
238            }
239		});
240/*	}//init shanhuc 
241});  */
242//uploader.init();

get.php

 1<?php
 2//get.php 
 3//http://ranjuan.cn/AliOSS_test/js-oss-service/php/get.php
 4    function gmt_iso8601($time) {
 5        $dtStr = date("c", $time);
 6        $mydatetime = new DateTime($dtStr);
 7        $expiration = $mydatetime->format(DateTime::ISO8601);
 8        $pos = strpos($expiration, '+');
 9        $expiration = substr($expiration, 0, $pos);
10        return $expiration."Z";
11    }
12 
13    $id= 'LTAI4Fx46XE';          // 请填写您的AccessKeyId。
14    $key= 'zLyQFH8JBtiNfGPdv9T3';     // 请填写您的AccessKeySecret。
15    // $host的格式为 bucketname.endpoint，请替换为您的真实信息。
16    $host = 'https://wodeoss.oss-cn-hangzhou.aliyuncs.com'; 
17//echo 'xxxx'; 输出格式不符合预期
18    
19    // $callbackUrl为上传回调服务器的URL，请将下面的IP和Port配置为您自己的真实URL信息。
20    $callbackUrl = 'http://ranjuan.cn/AliOSS_test/js-oss-service/php/callback.php';
21    $dir = 'user-dir-prefix/';          // 用户上传文件时指定的前缀。	
22    $callback_param = array('callbackUrl'=>$callbackUrl,                 'callbackBody'=>'filename=${object}&size=${size}&mimeType=${mimeType}&height=${imageInfo.height}&width=${imageInfo.width}', 
23                 'callbackBodyType'=>"application/x-www-form-urlencoded");//这里的callbackBody是阿里云回调 传递参数到回调地址-->$callbackUrl 
24                 //回调信息可根据前端进行一些自定义配置，这样就可以实现后端将上传文件关联id存入数据库！
25                 
26    $callback_string = json_encode($callback_param);
27    $base64_callback_body = base64_encode($callback_string);
28    $now = time();
29    $expire = 30;  //设置该policy超时时间是10s. 即这个policy过了这个有效时间，将不能访问。
30    $end = $now + $expire;
31    $expiration = gmt_iso8601($end);
32 
33    //最大文件大小.用户可以自己设置
34    $condition = array(0=>'content-length-range', 1=>0, 2=>1048576000);
35    $conditions[] = $condition; 
36 
37    // 表示用户上传的数据，必须是以$dir开始，不然上传会失败，这一步不是必须项，只是为了安全起见，防止用户通过policy上传到别人的目录。
38    $start = array(0=>'starts-with', 1=>'$key', 2=>$dir);
39    $conditions[] = $start; 
40 
41    $arr = array('expiration'=>$expiration,'conditions'=>$conditions);
42    $policy = json_encode($arr);
43    $base64_policy = base64_encode($policy);
44    $string_to_sign = $base64_policy;
45    $signature = base64_encode(hash_hmac('sha1', $string_to_sign, $key, true));
46    $response = array();
47    $response['accessid'] = $id;
48    $response['host'] = $host;
49    $response['policy'] = $base64_policy;
50    $response['signature'] = $signature;
51    $response['expire'] = $end;
52    $response['callback'] = $base64_callback_body;
53    $response['dir'] = $dir;  // 这个参数是设置用户上传文件时指定的前缀。
54    echo json_encode($response);
55?>

callback.php

 1<?php
 2//callback.php
 3// http://ranjuan.cn/AliOSS_test/js-oss-service/php/callback.php
 4 
 5// 1.获取OSS的签名header和公钥url header
 6$authorizationBase64 = "";
 7$pubKeyUrlBase64 = "";
 8/*
 9 * 注意：如果要使用HTTP_AUTHORIZATION头，你需要先在apache或者nginx中设置rewrite，以apache为例，修改
10 * 配置文件/etc/httpd/conf/httpd.conf(以你的apache安装路径为准)，在DirectoryIndex index.php这行下面增加以下两行
11    RewriteEngine On
12    RewriteRule .* - [env=HTTP_AUTHORIZATION:%{HTTP:Authorization},last]
13 * */
14if (isset($_SERVER['HTTP_AUTHORIZATION']))
15{
16    $authorizationBase64 = $_SERVER['HTTP_AUTHORIZATION'];
17}
18if (isset($_SERVER['HTTP_X_OSS_PUB_KEY_URL']))
19{
20    $pubKeyUrlBase64 = $_SERVER['HTTP_X_OSS_PUB_KEY_URL'];
21}
22 
23if ($authorizationBase64 == '' || $pubKeyUrlBase64 == '')
24{
25    header("http/1.1 403 Forbidden");
26    exit();
27}
28 
29// 2.获取OSS的签名
30$authorization = base64_decode($authorizationBase64);
31 
32// 3.获取公钥
33$pubKeyUrl = base64_decode($pubKeyUrlBase64);
34$ch = curl_init();
35curl_setopt($ch, CURLOPT_URL, $pubKeyUrl);
36curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
37curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 10);
38$pubKey = curl_exec($ch);
39if ($pubKey == "")
40{
41    //header("http/1.1 403 Forbidden");
42    exit();
43}
44 
45// 4.获取回调body
46$body = file_get_contents('php://input');
47 
48// 5.拼接待签名字符串
49$authStr = '';
50$path = $_SERVER['REQUEST_URI'];
51$pos = strpos($path, '?');
52if ($pos === false)
53{
54    $authStr = urldecode($path)."\n".$body;
55}
56else
57{
58    $authStr = urldecode(substr($path, 0, $pos)).substr($path, $pos, strlen($path) - $pos)."\n".$body;
59}
60// 6.验证签名
61$ok = openssl_verify($authStr, $authorization, $pubKey, OPENSSL_ALGO_MD5);
62if ($ok == 1)
63{
64    header("Content-Type: application/json");
65    $data = array("Status"=>"Ok","detail"=>$body);
66    echo json_encode($data);
67}
68else
69{
70    //header("http/1.1 403 Forbidden");
71    exit();
72}
73?>

完整源码：https://gitee.com/rorgent/related-to-alibaba-cloud/tree/master/oss%E5%89%8D%E7%AB%AF%E7%9B%B4%E4%BC%A0policy%E6%A8%A1%E5%BC%8F

染卷不卷'blog

阿里云OSS前端直接上传（服务端签名直传并设置上传回调）

染卷

发表评论取消回复

染卷

发表评论 取消回复

发表评论取消回复