简单地理解,阿里云OSS(以下简称OSS)就是一个储存空间比较大的硬盘。
一般储存空间在40GB-400TB范围内
根据自己的需要去购买,而且便宜!
在阿里云官网可以购买。
我自己做学习,测试,就买了个40GB的,刚好搞活动0.9元2年有效期!
就算不搞活动,大家也买得起,40GB,5元6个月,10元1年。少抽一包烟就可以买了...
像一些比较小的网站,40GB真的够用了。
视频,音乐网站就需要比较大的储存空间。
OSS到底用来干嘛的?
OK,再简单地说,就是你的网站日常更新需要存放的一些文件(图片、视频、文档、音频、安装包)等
,这些文件,你总不能放在服务器或者虚拟主机里面吧?
虚拟主机或者服务器的空间可是有限的,小则100MB,大则也就10GB-50GB这样
所以,如果你的网站经常更新,或者平常发布的内容包含的文件非常多并且很占空间
那就不适合用虚拟主机来存放文件了,而且虚拟主机的加载速度有限
OSS的加载速度比虚拟主机好。特别是视频网站和音乐网站,你把视频文件或者音乐上传到
虚拟主机,时间久了,你的虚拟主机就没什么空间了,而OSS空间大,可以用很久,放很多东西。
重要的是,虚拟主机的价钱比OSS高很多。
简单来说,OSS是适合用来储存网站的文件的(图片、视频、文档、音频、安装包等),相当于一个网盘了。而虚拟主机虽然也可以储存文件,但是限制太多了,虚拟主机更适合用来运行代码,存放程序文件。
OSS则没有运行代码的环境和能力。
以上说了这么多了,相信第一次接触OSS的人应该明白了。
所以这次,我将给大家分享一下OSS的使用:
1、先开通OSS,并购买储存包。
https://www.aliyun.com/produc...
2、然后进入OSS控制台,新建bucket
接着获取Access Key ID和Access Key Secret
我们点进去我们建立好的bucket
就可以对你的OSS进行管理了,比如绑定域名,OSS申请好了一般会给你分配一个域名,但是那个不是你自己的域名,如果你想要绑定自己的域名,就进去域名绑定绑定即可。
还有文件管理,可以把你想要上传的文件上传到OSS,上传成功后,点击文件名,就可以看到这个文件的信息。
还可以获得这个文件的地址,那么这个就是简单的外链系统了,通过OSS把文件上传到这里,获得外链,就这么简单。
你完全可以把这个OSS当成私人网盘来用。
还有一些其他的设置可以自己去琢磨,OSS还提供了SDK供大家开发,接入自己的网站项目,实现云储存,把网站的所有文件资源都储存到OSS里面。
我这里就利用官方的DEMO来制作一个简单的文件上传系统,非常简单的网盘。
下面是截图:
代码:
index.html
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>OSS web直传</title> <link rel="stylesheet" type="text/css" href="style.css"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <body> <h2>里客云OSS上传</h2> <form name=theform> <input type="radio" name="myradio" value="local_name"/> 上传后保持原文件名<br/> <input type="radio" name="myradio" value="random_name" checked=true/> 上传后生成随机文件名 </form> <h4>请选择文件上传:</h4> <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5!</div> <div id="container"> <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a> <a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a> </div> <pre id="console"></pre> <p> </p> </body> <script type="text/javascript" src="lib/plupload-2.1.2/js/plupload.full.min.js"></script> <script type="text/javascript" src="upload.js"></script> </html>
get.php
<?php 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"; } $id= '填写你的Access Key ID'; $key= '填写你的Access Key Secret'; $host = '填写你的EndPoint'; $now = time(); $expire = 30; //设置该policy超时时间是10s. 即这个policy过了这个有效时间,将不能访问 $end = $now + $expire; $expiration = gmt_iso8601($end); $dir = 'file_url/'; //最大文件大小.用户可以自己设置 $condition = array(0=>'content-length-range', 1=>0, 2=>1048576000); $conditions[] = $condition; //表示用户上传的数据,必须是以$dir开始, 不然上传会失败,这一步不是必须项,只是为了安全起见,防止用户通过policy上传到别人的目录 $start = array(0=>'starts-with', 1=>'$key', 2=>$dir); $conditions[] = $start; $arr = array('expiration'=>$expiration,'conditions'=>$conditions); //echo json_encode($arr); //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 = array(); $response['accessid'] = $id; $response['host'] = $host; $response['policy'] = $base64_policy; $response['signature'] = $signature; $response['expire'] = $end; //这个参数是设置用户上传指定的前缀 $response['dir'] = $dir; echo json_encode($response); ?>
其中你的EndPoint就是控制台里面的bucket的域名
upload.js
accessid = '' accesskey = '' host = '' policyBase64 = '' signature = '' callbackbody = '' filename = '' key = '' expire = 0 g_object_name = '' g_object_name_type = '' now = timestamp = Date.parse(new Date()) / 1000; function send_request() { var xmlhttp = null; if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { serverUrl = 'get.php' xmlhttp.open( "GET", serverUrl, false ); xmlhttp.send( null ); return xmlhttp.responseText } else { alert("Your browser does not support XMLHTTP."); } }; function check_object_radio() { var tt = document.getElementsByName('myradio'); for (var i = 0; i < tt.length ; i++ ) { if(tt[i].checked) { g_object_name_type = tt[i].value; break; } } } function get_signature() { //可以判断当前expire是否超过了当前时间,如果超过了当前时间,就重新取一下.3s 做为缓冲 now = timestamp = Date.parse(new Date()) / 1000; if (expire < now + 3) { body = send_request() var obj = eval ("(" + body + ")"); host = obj['host'] policyBase64 = obj['policy'] accessid = obj['accessid'] signature = obj['signature'] expire = parseInt(obj['expire']) callbackbody = obj['callback'] key = obj['dir'] return true; } return false; }; function random_string(len) { len = len || 32; var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = chars.length; var pwd = ''; for (i = 0; i < len; i++) { pwd += chars.charAt(Math.floor(Math.random() * maxPos)); } return pwd; } function get_suffix(filename) { pos = filename.lastIndexOf('.') suffix = '' if (pos != -1) { suffix = filename.substring(pos) } return suffix; } function calculate_object_name(filename) { if (g_object_name_type == 'local_name') { g_object_name += "${filename}" } else if (g_object_name_type == 'random_name') { suffix = get_suffix(filename) g_object_name = key + random_string(10) + suffix } return '' } function get_uploaded_object_name(filename) { if (g_object_name_type == 'local_name') { tmp_name = g_object_name tmp_name = tmp_name.replace("${filename}", filename); return tmp_name } else if(g_object_name_type == 'random_name') { return g_object_name } } function set_upload_param(up, filename, ret) { if (ret == false) { ret = get_signature() } g_object_name = key; if (filename != '') { suffix = get_suffix(filename) calculate_object_name(filename) } new_multipart_params = { 'key' : g_object_name, 'policy': policyBase64, 'OSSAccessKeyId': accessid, 'success_action_status' : '200', //让服务端返回200,不然,默认会返回204 'callback' : callbackbody, 'signature': signature, }; up.setOption({ 'url': host, 'multipart_params': new_multipart_params }); up.start(); } var uploader = new plupload.Uploader({ runtimes : 'html5,flash,silverlight,html4', browse_button : 'selectfiles', //multi_selection: false, container: document.getElementById('container'), flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf', silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap', url : 'http://oss.aliyuncs.com', filters: { mime_types : [ //设置允许上传的文件类型 { title : "Support files", extensions : "jpg,gif,png,bmp,Doc,Pdf,PPT,Xls,Docx,Pptx,Xlsx,txt,exe,apk,ipa,dmg,mp4,avi,Mov,Wmv,Mkv,F4v,flv,Rmvb,Mp3,Acc,Wav,php,html,htm,js,css,xml,py,java,ttf,otf,bat,dll,zip,rar" } ], max_file_size : '1024mb', //最大只能上传1024mb的文件 prevent_duplicates : true //不允许选取重复文件 }, init: { PostInit: function() { document.getElementById('ossfile').innerHTML = ''; document.getElementById('postfiles').onclick = function() { set_upload_param(uploader, '', false); return false; }; }, FilesAdded: function(up, files) { plupload.each(files, function(file) { document.getElementById('ossfile').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ')<b></b>' +'<div class="progress"><div class="progress-bar" style="width: 0%"></div></div>' +'<br/>' +'</div>'; }); }, BeforeUpload: function(up, file) { check_object_radio(); set_upload_param(up, file.name, true); }, UploadProgress: function(up, file) { var d = document.getElementById(file.id); d.getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>"; var prog = d.getElementsByTagName('div')[0]; var progBar = prog.getElementsByTagName('div')[0] progBar.style.width= 2*file.percent+'px'; progBar.setAttribute('aria-valuenow', file.percent); }, FileUploaded: function(up, file, info) { if (info.status == 200) { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<br/>上传完成!<br/><a href="https://oss.likeyunba.com/'+get_uploaded_object_name(file.name)+'" target="view_window">https://oss.likeyunba.com/'+get_uploaded_object_name(file.name)+'</a>'; } else { document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = info.response; } }, Error: function(up, err) { if (err.code == -600) { document.getElementById('console').appendChild(document.createTextNode("\n上传失败!文件大小不能超过1024MB")); } else if (err.code == -601) { document.getElementById('console').appendChild(document.createTextNode("\n上传失败!不支持上传该文件后缀名")); } else if (err.code == -602) { document.getElementById('console').appendChild(document.createTextNode("\n上传失败!服务器已存在该文件")); } else { document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response)); } } } }); uploader.init();
OK,代码就这么多,但是还有一个lib文件夹还有很多文件,我这里直接把代码打包好。
https://pan.lanzou.com/i0jqwda
要注意的是,一定要保证bucket属性CORS设置支持POST方法。因为这个HTML直接上传到OSS,会产生跨域请求。必须在bucket属性里面设置允许跨域。
上图是在OSS控制台 - 基础设置 - 跨域设置里面设置的,把POST打勾,其它填*号即可。
demo:
http://oss-demo.aliyuncs.com/...
微信扫码查看demo: