關於上傳檔案到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後端提供的shared access signature介面**($) );
}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))
客戶端封裝瀏覽器
官網訪問位址 開發時用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可以只開啟乙個到伺服器的鏈結,並且在此鏈結上交換資訊。其優勢...