使用 Javascript 實現跨域上傳文件到存儲

08/31/2017

本文內容

用戶在 Azure 上構建 B/S 程序時，有很多場景需要存儲海量的文件，比如圖片、文檔及視頻等，按照傳統的方式，很多用戶會將這些文件存儲到宿主服務器上，比如基于 IIS 網站可能會考慮將這些文件存放在虛擬目錄下某個文件夾中。不過目前大部分的 Azure 計算服務在一定程度都有容量限制，比如虛擬機可附加的磁盤數量和單塊磁盤容量也只能支撐幾十 TB 的總容量。PaaS 的計算服務，如 Web Apps、Cloud Service、Service Fabric 等因無法附加磁盤，所支撐的存儲容量更是少之有少，往往支持到幾十或幾百 GB。

因此，對于云端 B/S 應用產生的文件存儲，我們急需一種有效的存儲方式。從現有的服務及適用場景來看，將應用文件托管到 Azure Blob Storage 服務，是最為有效的方式。存儲單個賬戶規模可以支撐 500TB 容量，通過配置多個賬戶，可以支撐應用文件的海量存儲，達到線性擴展的目的。

那么，B/S 應用如何將文件上傳到存儲服務呢？一般有兩種方案：

方式 1：使用傳統邏輯將文件從瀏覽器端(Client)上傳到虛擬機(Server),然后在調用存儲接口，將文件從虛擬機(Server)上傳到存儲(Azure Storage)。

方式 2：將文件從瀏覽器端(Client)直接跨域上傳到存儲(Azure Storage),同時在發起 Ajax 請求到虛擬機(Server),在虛擬機(Server)接收上傳的文件信息，進行后續邏輯處理，比如寫入數據庫等。

第一種方式略顯笨拙，缺點比較明顯，涉及中轉過程，但不涉及跨域，不太適合互聯網類型應用。第二種方式基于 Ajax 技術，不涉及中轉，但需要了解存儲 REST 接口、跨域訪問等知識，實現難度略大一些，不過是最佳的方案選擇。

下面我們將介紹第二種方案的實現，在此之前我們需要掌握一些基本的知識，參考如下：

存儲共享訪問簽名(SAS)

連接目標存儲賬戶，在目標“存儲容器”上點擊右鍵，在彈出的菜單項中選擇“Get Shared Access Signature…”:

上傳文件需要寫入權限，如果需要持續上傳，可以調整過期時間，示例如下：

點擊“Create”，在彈出的界面上我們即可獲取 SAS 簽名 URL。Query String 即是簽名字符串，這個簽名字符串包含操作權限、有效時間等，如下：

https://devstoragerm.blob.core.chinacloudapi.cn/files?st=2017-08-09T10%3A18%3A00Z&se=2017-12-31T10%3A18%3A00Z&sp=w&sv=2016-05-31&sr=c&sig=kupC7DiU0vaTMqY3DZ3sbl96MV21efmXwd8yDix%2BJ7E%3D

存儲跨域設置(CORS)

連接目標存儲賬戶，在 “Blob Containers” 上點擊右鍵，在彈出的菜單項中選擇 “Configure CORS Settings…”:

在上一步操作彈出的界面，點擊“Add”，配置 CORS 規則，示例如下：

存儲 REST 接口

PutBlob: 適合上傳小文件的 REST API。

PutBlock: 分塊上傳，可以實現大文件上傳、進度控制、斷點續傳的 REST API。

完整的示例：

在要上傳的容器上，創建一個“寫”權限簽名 URL:

簽名 URL 示例：https://devstoragerm.blob.core.chinacloudapi.cn/files?st=2017-08-09T10%3A45%3A00Z&se=2017-08-10T10%3A45%3A00Z&sp=w&sv=2016-05-31&sr=c&sig=reFh8jikl%2B2hOVhJ5SORPkItoFN6Y8bbq%2FeYgKn6QsI%3D

配置 CORS，部署到生產環境，請限制為響應允許的 Origins、Methods、Headers，這里我們在本地測試，使用*提供了“寬范圍”的 CORS 設置：

使用支持 H5 的瀏覽器打開 test.html，將簽名 URL 粘貼到“SAS URI”,選擇目標文件后，點擊“Upload File”,完成上傳。過程顯示如下:

上傳完成：

查看容器：

其它相關參考資料：

- [New Azure Storage JavaScript client library for browsers – Preview (MSDN)](https://blogs.msdn.microsoft.com/windowsazurestorage/2017/03/07/new-azure-storage-javascript-client-library-for-browsers-preview/)

- [通過 HTML5 控件可靠地上傳 Blob 存儲(MSDN)](https://docs.microsoft.com/zh-cn/rest/api/storageservices/reliable-uploads-to-blob-storage-via-an-html5-control)

- [使用共享訪問簽名，HTML 和 JavaScript 在 Windows Azure Blob 存儲中上傳大文件 (Stackoverflow)](https://stackoverflow.com/questions/19935404/upload-largefile-to-azure-blob-using-javascript)

總結

以上是生活随笔為你收集整理的js ajax 跨域上传文件,使用 Javascript 实现跨域上传文件到存储的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。