html讀取oss OSS的簡單使用

2021-10-12 14:43:59 字數 4006 閱讀 9045

oss簡介

object storage service,簡稱 oss,是阿里雲提供的海量、安全、低成本、高可靠的雲儲存服務。

它具有與平台無關的restful api介面,能夠提供99.999999999%的服務永續性。

使用場景:

分享優勢:

成本低(40g才6元,比ecs便宜太多)

不會影響ecs頻寬

和伺服器解耦

下面介紹一些基本功能:

初始化建立儲存空間

上傳檔案

跨域訪問設定

設定讀寫許可權

oss使用(net sdk使用)

1.初始化

建立乙個ossclient,就可以很方便的呼叫oss的方法。

const string accesskeyid = "*********";

const string accesskeysecret = "*********x";

const string endpoint = "oss-cn-beijing.aliyuncs.com";//oss對應的區域位址

private static ossclient ossclient = new ossclient(endpoint, accesskeyid, accesskeysecret);

2.建立儲存空間

很簡單,只需要呼叫ossclient.createbucket

ossclient.createbucket("mybucket");//新建乙個bucket

3.設定讀寫許可權

呼叫ossclient.setbucketacl

ossclient.setbucketacl("mybucket", cannedaccesscontrollist.publicread);//設定為公共讀

cannedaccesscontrollist有三個屬性:private(私有),publicread(公共讀),publicreadwrite(公共讀寫)

4.跨域訪問設定

呼叫ossclient.setbucketcors

var req = new setbucketcorsrequest("mybucket");

var rule = new corsrule();

//指定允許跨域請求的**

rule.addallowedorigin("*");

//指定允許的跨域請求方法(get/put/delete/post/head)

rule.addallowedmethod("post");

//控制在options預取指令中access-control-request-headers頭中指定的header是否允許。

rule.addallowedheader("*");

req.addcorsrule(rule);

ossclient.setbucketcors(req);

5.上傳檔案

呼叫ossclient.putobject

var result = ossclient.putobject("mybucket", "111.mp4", @"d:\237badef-0f6d-4a8e-a634-a44c9704b6e6.mp4");

console.writeline(result.etag);

6.列出儲存空間中的所有檔案

呼叫ossclient.listobjects

var listobjectsrequest = new listobjectsrequest("mybucket");

var result = ossclient.listobjects(listobjectsrequest);

console.writeline("list objects succeeded");

foreach (var summary in result.objectsummaries)

console.writeline("file name:", summary.key);

以上步驟1到4,可以在oss管理後端完成

web端直傳

剛開始使用oss的時候,是採用前端將檔案流上傳到web伺服器,然後通過web伺服器再上傳到oss

這種做法有三個缺點:

第一:上傳慢。先上傳到應用伺服器,再上傳到oss,網路傳送多了一倍。如果資料直傳到oss,不走應用伺服器,速度將大大提公升,而且oss是採用bgp頻寬,能保證各地各運營商的速度。

第二:擴充套件性不好。如果後續使用者多了,應用伺服器會成為瓶頸。

第三:費用高。由於oss上傳流量是免費的。如果資料直傳到oss,不走應用伺服器,那麼將能省下幾台應用伺服器

如何操作?

1.通過js控制項直傳

採用plupload 直接提交表單資料(即postobject)到oss;

在js端,輸入oss的認證資訊(不安全)

var policytext = ) ;

var signature = crypto.util.bytestobase64(bytes);

var uploader = new plupload.uploader(',

'key' : '$',

'policy': policybase64,

'ossaccesskeyid': accessid,

'success_action_status' : '200', //讓服務端返回200,不然,缺省會返回204

'signature': signature,

init: else

max_file_size : '600000kb', //最大只能上傳600m的檔案

prevent_duplicates : true //不允許選取重複檔案

url : host,

init: else{

/* 彈出框提示錯誤 */

toastr.error(res.rspmsg);

filesadded: function(up, files) {

plupload.each(files, function(file) {

set_upload_param(up, file.name, true);

document.getelementbyid('ossfile').innerhtml += '

' + file.name + ' (' + plupload.formatsize(file.size) + ')'

';beforeupload: function(up, file) {

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 || info.status < 200)

vm.formmodel.videopath=uploadfilename;//將檔名記錄下來,用於儲存

document.getelementbyid(file.id).getelementsbytagname('b')[0].innerhtml = 'success';

else

document.getelementbyid(file.id).getelementsbytagname('b')[0].innerhtml = info.response;

error: function(up, err) {

uploader.init();

HTML簡單的標籤

超文字標記語言 展示頁面主題內容 文件的標題 提供頁面元資訊 標題逐級遞減 段落加粗,強調,頁面顯示加粗 斜體,輕微強調,頁面顯示斜體,引用 一般用於引用電影,書籍,報告等 不可引用人名,頁面顯示斜體 下標上標 換行,空標籤 安全換行 水平線,空標籤 大段落縮排,可包含p元素,小段落縮排,顯示出段落...

HTML的簡單介紹

html 指超文字標籤語言。是hypertext markup language首字母的簡寫。通過它,可以實現 鏈結 以及程式等等多種元素。現如今,html已經是程式設計師必須掌握的一項基本功。1 檔案拓展名預設使用htm,便於作業系統或者程式辨認檔案,而則基本上存為gif或jpg 2 瀏覽器預設忽...

HTML的簡單標籤

注釋 idea快捷鍵 ctrl 注釋尾doctype 告訴瀏覽器我們要使用的規範 是乙個總標籤,我們編寫的html都需要在這個標籤中 head 代表網頁頭部 title 網頁標題 body 網頁主體 1.標題標籤2.段落標籤 這是第一段 這是第二段 這是第二段結束 3.水平線標籤 單標籤 自閉和標籤...