從客戶端瀏覽器直傳檔案到Storage

2022-01-16 07:18:29 字數 4752 閱讀 7313

關於上傳檔案到azure storage沒有什麼可講的,不論我們使用哪種平台、語言,上傳流程都如下圖所示:

從上圖我們可以了解到從客戶端上傳檔案到storage,是需要先將檔案上傳到應用服務上,然後再通過應用伺服器上的後端**將檔案上傳到storage,在這裡應用伺服器就是起到乙個**的作用。

當然,這是最常規的做法,但是確有乙個致命的弱點,那就是我們上傳檔案到storage中,是要占用應用伺服器的計算、網路、io等資源的,這對於一些對效能要求很高的應用場景是很難接受的。

那麼,我們是否有解決方案?答案是肯定的,我們可以跳過應用伺服器從客戶端將檔案直傳到storage中,那麼我們如何來構建這套解決方案呢?這就是我們下面要講的。

我們先來看下直傳檔案到storage的流程圖:

這裡特別有幾點需要注意的地方:

1、  不能使用儲存賬號和儲存金鑰來驗證身份進行檔案上傳,因為這會在客戶端暴露儲存賬號和儲存金鑰等敏感資訊。

2、  storage預設是不能跨域訪問的,所以我們需要將應用伺服器所在域加入到storage的跨域規則中。

3、  通過上圖,我們可以看到客戶端一共傳送兩次http請求,第一次從應用伺服器獲取shared access signature(具有寫許可權),再帶著獲取到的sas將檔案從客戶端上傳到storage。

大致流程和思路已經講清楚了,那麼下面我們就來看看用**是如何實現的。

>直傳檔案到storage

title

>

<

script

src="~/scripts/jquery-1.10.2.js"

>

script

>

<

script

src="~/scripts/uploadfile.js"

>

script

>

head

>

<

body

>

<

input

type

="file"

id="file"

name

="file"

/>

<

div

id="output"

>

<

strong

>file properties:

strong

>

<

br />

<

p>

name:

<

span

id="filename"

>

span

>

p>

<

p>

file size:

<

span

id="filesize"

>

span

>

bytes.

p>

<

p>

file type:

<

span

id="filetype"

>

span

>

p>

<

p>

<

input

type

="button"

value

="upload file"

id="uploadfile"

/>

p>

div>

body

>

html

>

updatefile.js

(function

($) );

}function

readeronloadend(evt) ,

function

(data, status) );}};

function

handlefileselect(e) ', , function

(data) );

}function

startupload()

function

getcontenttype(blobname)

return

contenttype;}$(

function

()

else

$('#file').bind('change', handlefileselect);

//上傳檔案

$('#uploadfile').bind('click', startupload);

});}(jquery))

後端提供的shared access signature介面**

客戶端封裝瀏覽器

官網訪問位址 開發時用sdk,開啟的客戶端頁面可以f12檢視頁面資訊 上線時用下面那個。安裝好後的資料夾 vue專案打包,npm run build,生成乙個static資料夾和乙個index.html,index.html就是入口頁面 現在需要建立乙個配置檔案package.json webkit...

從瀏覽器啟動客戶端程式的方法

從瀏覽器頁面上,啟動使用者本地的客戶端程式的方法,常見的有兩種。一 asynchronous pluggable protocols協議方式 msdn或網路上搜尋,即可找到相應的方法。從瀏覽器啟動客戶端程式 二 通過activex控制項來啟動本地程式 j ascipt方法呼叫形式 通過j ascip...

用於瀏覽器或其他客戶端 WebSocket終成標準

websocket是用於瀏覽器或其他客戶端,建立與web伺服器的雙向 可靠通訊渠道的協議。與其他方法相比的最大好處是,不需要使用多個xml http請求來完成,或者是必須讓乙個正常的http鏈結盡可能長時間的保持open。websocket可以只開啟乙個到伺服器的鏈結,並且在此鏈結上交換資訊。其優勢...