利用阿里云OSS開發一個私人網盤/外鏈系統，php+js實現

stdying 發布于2019-06-28 18:26 / 2987人閱讀

摘要：什么是阿里云簡單地理解，阿里云以下簡稱就是一個儲存空間比較大的硬盤。一般儲存空間在范圍內根據自己的需要去購買，而且便宜在阿里云官網可以購買。你完全可以把這個當成私人網盤來用。我這里就利用官方的來制作一個簡單的文件上傳系統，非常簡單的網盤。

什么是阿里云OSS？
簡單地理解，阿里云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

OSS web直傳

里客云OSS上傳

請選擇文件上傳：

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

選擇文件開始上傳

get.php

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 += "" + 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("
上傳失敗！文件大小不能超過1024MB"));
            }
            else if (err.code == -601) {
                document.getElementById("console").appendChild(document.createTextNode("
上傳失敗！不支持上傳該文件后綴名"));
            }
            else if (err.code == -602) {
                document.getElementById("console").appendChild(document.createTextNode("
上傳失敗！服務器已存在該文件"));
            }
            else 
            {
                document.getElementById("console").appendChild(document.createTextNode("
Error 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：

GPU云服務器云服務器私人網盤系統 php實現網盤搭建私人網盤可外鏈網盤

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/28269.html

利用阿里云OSS開發一個私人網盤/外鏈系統，php+js實現

摘要：什么是阿里云簡單地理解，阿里云以下簡稱就是一個儲存空間比較大的硬盤。一般儲存空間在范圍內根據自己的需要去購買，而且便宜在阿里云官網可以購買。你完全可以把這個當成私人網盤來用。我這里就利用官方的來制作一個簡單的文件上傳系統，非常簡單的網盤。什么是阿里云OSS？簡單地理解，阿里云OSS(以下簡稱OSS)就是一個儲存空間比較大的硬盤。一般儲存空間在40GB-400TB范圍內根據自己的需要去...

張春雷 2019-08-26 17:15 評論0 收藏0
開箱即用-簡潔實用的ImgURL圖床相冊程序和Zdir目錄列表程序(文件管理器）

摘要：本篇文章就來分享一下兩款開箱即用上手容易的圖床相冊程序和在線文件管理器目錄列表程序，由好友開發并維護，非常適合個人站長用作圖床相冊和文件下載分享。雖然說現在照片還有文件存儲等都可以上傳到網盤中，但是國內的網盤與國外的網盤存儲還有點不一樣。以百度網盤與Dropbox對比為例，百度網盤頂多算是一個個人用來存放私人照片和文件的網絡硬盤，如果用來分享的話很容易被百度限制或者取消下載。很多的個人站長為...

番茄西紅柿 2021-07-30 14:58 評論0 收藏2637
寶塔面板安裝iFileSpace，一鍵搭建專屬的私人網盤系統

摘要：這篇文章還是利用寶塔來搭建，寶塔服務器面板，一鍵全能部署及管理，送你元禮包，點我領取程序的功能如下支持第三方存儲目前支持阿里云，華為云，。iFileSpace 是一個在線個人文件管理工具，在線網盤程序，可快速一鍵搭建私人云盤，支持本地存儲和對象存儲（目前支持阿里云oss,華為云obs,OneDrive）, 如部署在公網服務器，可替代百度網盤等在線網盤，自主搭建，數據完全自主管理！也可部署在家...

Alex 2021-09-09 11:36 評論0 收藏0
ZFile自建免費公共網盤服務-支持阿里云OSS,OneDrive,FTP,S3協議等云存儲

對于網站存儲的需求，大多數人還是以私有網盤為主，目的是為了可以存儲屬于私人的視頻、文檔、音頻等資料。但是，也有不少的人想要搭建一個公共的網盤，主要目的是可以方便所有人查看、瀏覽和下載、使用，同時也提供視頻在線播放，變成影視站點。這樣的公共網盤服務搭建起來并不是很復雜，但是苦于高昂的存儲費用，有的人盯上了超大容量且免費的網盤服務，例如OneDrive，團隊版甚至可以達到TB以上，將OneDrive變...

番茄西紅柿 2021-07-30 14:57 評論0 收藏2637
ZPan自建網盤存儲-基于各大云存儲商的網盤系統zpan安裝使用教程

想自建網盤但是又苦于數據太大，購買大存儲容量的VPS主機價格太貴？不妨試試ZPan自建網盤存儲。ZPan致力于打造一款不限速的網盤系統，因此采用客戶端直連云存儲的方式進行設計，即它不支持本地存儲，你的所有數據都是存在第三方存儲商那里。目前ZPan支持所有兼容S3協議的云存儲平臺，包括阿里云OSS 、騰訊云COS 、七牛云Kodo 、Ucloud US3（暫不支持自動設置CORS）、華為云OBS ...

番茄西紅柿 2021-07-30 14:57 評論0 收藏2637

發表評論

登陸后可評論

0條評論

stdying

男|高級講師

我要關注我要私信

TA的文章

#便宜#極光KVM：1核/1G/1T/100Mbps/美國AS9929/年付179元，美國大帶寬GB

閱讀 2771·2021-10-11 11:08
C++命名空間與缺省參數

閱讀 1489·2021-09-30 09:48
什么是虛擬主機服務器-服務器與虛擬主機有什么區別？

閱讀 1049·2021-09-22 15:29
09.26 騰訊校招前端一面經歷

閱讀 1037·2019-08-30 15:54
CSS3之mix-blend-mode

閱讀 976·2019-08-29 15:19
js中sort總結

閱讀 527·2019-08-29 13:12
聊聊我的第一篇10萬+，同時反駁某些評論

閱讀 3161·2019-08-26 13:53
js的setTimeout和Promise---同步異步和微任務宏任務

閱讀 957·2019-08-26 13:28

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

利用阿里云OSS開發一個私人網盤/外鏈系統，php+js實現

里客云OSS上傳

請選擇文件上傳：

相關文章