利用阿里云OSS開(kāi)發(fā)一個(gè)私人網(wǎng)盤(pán)/外鏈系統(tǒng)，php+js實(shí)現(xiàn)

張春雷發(fā)布于2019-08-26 17:15 / 2345人閱讀

摘要：什么是阿里云簡(jiǎn)單地理解，阿里云以下簡(jiǎn)稱(chēng)就是一個(gè)儲(chǔ)存空間比較大的硬盤(pán)。一般儲(chǔ)存空間在范圍內(nèi)根據(jù)自己的需要去購(gòu)買(mǎi)，而且便宜在阿里云官網(wǎng)可以購(gòu)買(mǎi)。你完全可以把這個(gè)當(dāng)成私人網(wǎng)盤(pán)來(lái)用。我這里就利用官方的來(lái)制作一個(gè)簡(jiǎn)單的文件上傳系統(tǒng)，非常簡(jiǎn)單的網(wǎng)盤(pán)。

什么是阿里云OSS？
簡(jiǎn)單地理解，阿里云OSS(以下簡(jiǎn)稱(chēng)OSS)就是一個(gè)儲(chǔ)存空間比較大的硬盤(pán)。
一般儲(chǔ)存空間在40GB-400TB范圍內(nèi)
根據(jù)自己的需要去購(gòu)買(mǎi)，而且便宜！

在阿里云官網(wǎng)可以購(gòu)買(mǎi)。
我自己做學(xué)習(xí)，測(cè)試，就買(mǎi)了個(gè)40GB的，剛好搞活動(dòng)0.9元2年有效期！
就算不搞活動(dòng)，大家也買(mǎi)得起，40GB，5元6個(gè)月，10元1年。少抽一包煙就可以買(mǎi)了...
像一些比較小的網(wǎng)站，40GB真的夠用了。
視頻，音樂(lè)網(wǎng)站就需要比較大的儲(chǔ)存空間。

OSS到底用來(lái)干嘛的？
OK，再簡(jiǎn)單地說(shuō)，就是你的網(wǎng)站日常更新需要存放的一些文件（圖片、視頻、文檔、音頻、安裝包）等
，這些文件，你總不能放在服務(wù)器或者虛擬主機(jī)里面吧？
虛擬主機(jī)或者服務(wù)器的空間可是有限的，小則100MB，大則也就10GB-50GB這樣

所以，如果你的網(wǎng)站經(jīng)常更新，或者平常發(fā)布的內(nèi)容包含的文件非常多并且很占空間
那就不適合用虛擬主機(jī)來(lái)存放文件了，而且虛擬主機(jī)的加載速度有限
OSS的加載速度比虛擬主機(jī)好。特別是視頻網(wǎng)站和音樂(lè)網(wǎng)站，你把視頻文件或者音樂(lè)上傳到
虛擬主機(jī)，時(shí)間久了，你的虛擬主機(jī)就沒(méi)什么空間了，而OSS空間大，可以用很久，放很多東西。
重要的是，虛擬主機(jī)的價(jià)錢(qián)比OSS高很多。

簡(jiǎn)單來(lái)說(shuō)，OSS是適合用來(lái)儲(chǔ)存網(wǎng)站的文件的（圖片、視頻、文檔、音頻、安裝包等），相當(dāng)于一個(gè)網(wǎng)盤(pán)了。而虛擬主機(jī)雖然也可以儲(chǔ)存文件，但是限制太多了，虛擬主機(jī)更適合用來(lái)運(yùn)行代碼，存放程序文件。

OSS則沒(méi)有運(yùn)行代碼的環(huán)境和能力。

以上說(shuō)了這么多了，相信第一次接觸OSS的人應(yīng)該明白了。
所以這次，我將給大家分享一下OSS的使用：
1、先開(kāi)通OSS，并購(gòu)買(mǎi)儲(chǔ)存包。
https://www.aliyun.com/produc...

2、然后進(jìn)入OSS控制臺(tái)，新建bucket

接著獲取Access Key ID和Access Key Secret

我們點(diǎn)進(jìn)去我們建立好的bucket

就可以對(duì)你的OSS進(jìn)行管理了，比如綁定域名，OSS申請(qǐng)好了一般會(huì)給你分配一個(gè)域名，但是那個(gè)不是你自己的域名，如果你想要綁定自己的域名，就進(jìn)去域名綁定綁定即可。

還有文件管理，可以把你想要上傳的文件上傳到OSS，上傳成功后，點(diǎn)擊文件名，就可以看到這個(gè)文件的信息。

還可以獲得這個(gè)文件的地址，那么這個(gè)就是簡(jiǎn)單的外鏈系統(tǒng)了，通過(guò)OSS把文件上傳到這里，獲得外鏈，就這么簡(jiǎn)單。
你完全可以把這個(gè)OSS當(dāng)成私人網(wǎng)盤(pán)來(lái)用。

還有一些其他的設(shè)置可以自己去琢磨，OSS還提供了SDK供大家開(kāi)發(fā)，接入自己的網(wǎng)站項(xiàng)目，實(shí)現(xiàn)云儲(chǔ)存，把網(wǎng)站的所有文件資源都儲(chǔ)存到OSS里面。

我這里就利用官方的DEMO來(lái)制作一個(gè)簡(jiǎn)單的文件上傳系統(tǒng)，非常簡(jiǎn)單的網(wǎng)盤(pán)。
下面是截圖：

代碼：
index.html

OSS web直傳

里客云OSS上傳

請(qǐng)選擇文件上傳：

你的瀏覽器不支持flash,Silverlight或者HTML5！

選擇文件開(kāi)始上傳

get.php

format(DateTime::ISO8601);
        $pos = strpos($expiration, "+");
        $expiration = substr($expiration, 0, $pos);
        return $expiration."Z";
    }

    $id= "填寫(xiě)你的Access Key ID";
    $key= "填寫(xiě)你的Access Key Secret";
    $host = "填寫(xiě)你的EndPoint";

    $now = time();
    $expire = 30; //設(shè)置該policy超時(shí)時(shí)間是10s. 即這個(gè)policy過(guò)了這個(gè)有效時(shí)間，將不能訪問(wèn)
    $end = $now + $expire;
    $expiration = gmt_iso8601($end);

    $dir = "file_url/";

    //最大文件大小.用戶可以自己設(shè)置
    $condition = array(0=>"content-length-range", 1=>0, 2=>1048576000);
    $conditions[] = $condition; 

    //表示用戶上傳的數(shù)據(jù),必須是以$dir開(kāi)始, 不然上傳會(huì)失敗,這一步不是必須項(xiàng),只是為了安全起見(jiàn),防止用戶通過(guò)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;
    //這個(gè)參數(shù)是設(shè)置用戶上傳指定的前綴
    $response["dir"] = $dir;
    echo json_encode($response);
?>

其中你的EndPoint就是控制臺(tái)里面的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()
{
    //可以判斷當(dāng)前expire是否超過(guò)了當(dāng)前時(shí)間,如果超過(guò)了當(dāng)前時(shí)間,就重新取一下.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", //讓服務(wù)端返回200,不然，默認(rèn)會(huì)返回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 : [ //設(shè)置允許上傳的文件類(lèi)型
        { 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 //不允許選取重復(fù)文件
    },

    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 += "" + file.name + " (" + plupload.formatSize(file.size) + ")"
                +""
                +"
"
                +"";
            });
        },

        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 = "" + file.percent + "%";
            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 = "
上傳完成！
https://oss.likeyunba.com/"+get_uploaded_object_name(file.name)+"";
            }
            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("
上傳失??！文件大小不能超過(guò)1024MB"));
            }
            else if (err.code == -601) {
                document.getElementById("console").appendChild(document.createTextNode("
上傳失??！不支持上傳該文件后綴名"));
            }
            else if (err.code == -602) {
                document.getElementById("console").appendChild(document.createTextNode("
上傳失敗！服務(wù)器已存在該文件"));
            }
            else 
            {
                document.getElementById("console").appendChild(document.createTextNode("
Error xml:" + err.response));
            }
        }
    }
});

uploader.init();

OK，代碼就這么多，但是還有一個(gè)lib文件夾還有很多文件，我這里直接把代碼打包好。
https://pan.lanzou.com/i0jqwda

要注意的是，一定要保證bucket屬性CORS設(shè)置支持POST方法。因?yàn)檫@個(gè)HTML直接上傳到OSS，會(huì)產(chǎn)生跨域請(qǐng)求。必須在bucket屬性里面設(shè)置允許跨域。

上圖是在OSS控制臺(tái) - 基礎(chǔ)設(shè)置 - 跨域設(shè)置里面設(shè)置的，把POST打勾，其它填*號(hào)即可。

demo：
http://oss-demo.aliyuncs.com/...

微信掃碼查看demo：

云服務(wù)器私人網(wǎng)盤(pán)系統(tǒng) php實(shí)現(xiàn)網(wǎng)盤(pán) 搭建私人網(wǎng)盤(pán) 可外鏈網(wǎng)盤(pán)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/110129.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

張春雷

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

鯨魚(yú)數(shù)據(jù)：江西NAT VPS,1核/512MB內(nèi)存/5GB SSD空間/1TB流量/100Mbps端

閱讀 1664·2021-09-23 11:31
開(kāi)源早讀課周刊（第 9 期）：騰訊的開(kāi)源穩(wěn)步推進(jìn)

閱讀 955·2021-09-23 11:22
如何評(píng)主機(jī)地址-電腦主機(jī)名或IP地址怎么查？

閱讀 1390·2021-09-22 15:41
Linux驅(qū)動(dòng)開(kāi)發(fā)：匯編LED燈實(shí)驗(yàn)（I.MX6UL芯片）

閱讀 4115·2021-09-03 10:28
Web前端開(kāi)發(fā)過(guò)程踩過(guò)的坑以及一些小方法技巧（持續(xù)更新）

閱讀 2943·2019-08-30 15:55
記錄

閱讀 3572·2019-08-30 15:55
CSS實(shí)現(xiàn)8種炫酷按鈕

閱讀 2006·2019-08-30 15:44
微信小程序教學(xué)第四章第一節(jié)（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程：詳情-頁(yè)面制作

閱讀 2743·2019-08-30 13:50

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

利用阿里云OSS開(kāi)發(fā)一個(gè)私人網(wǎng)盤(pán)/外鏈系統(tǒng)，php+js實(shí)現(xiàn)