tcb-js-sdk 讓開發者可以在網頁端使用 JavaScript 代碼服務通路雲開發的服務，以輕松建構自己的公衆号頁面或者獨立的網站等 Web 服務。本文将以實作圖檔上傳功能為例，介紹 tcb-js-sdk 的基本配置流程。
在使用雲開發 Cloudbase 開發應用的過程中，除了借助雲開發提供的資料庫存儲資料以外，常常還會遇到需要實作圖檔上傳功能的需求，在這種情況下，可以通過 tcb-js-sdk 來完成圖檔上傳的功能。接下來，我們來開發一個簡易的圖檔上傳功能，作為示範。
主要流程：
想要使用 tcb-js-sdk 來完成開發，我們需要在項目中引入 tcb-js-sdk ，進而可以借助其提供的 API 實作簡單的調用雲開發各項能力。
在具體的接入時，可以根據你的項目類型，選擇使用 CDN 接入還是通過包管理器接入，這裡我使用 CDN 來完成接入。
在項目中添加如下代碼，并根據 NPM 上的說明，選擇最新版本的 SDK ，比如目前最新版本是 1.7.1 版本，就可以将下方代碼中的 <code>${version}</code> 替換為 1.7.1 。
雲開發的 API 調用需要使用者具備身份，為了簡化，這裡我選擇使用匿名登入，這樣就可以更簡單的完成項目的開發。關于匿名登入的使用者配置，你可以在雲開發的官方文檔中找到相關的說明。當你将你的登入配置成這樣的時候，就說明配置好了使用者登入。
此外，你還需要将需要調用雲開發 SDK 的網頁配置到安全域名中，進而確定可以正常調用 API 接口。
在完成了使用者登入的配置以後，可以在項目代碼中加入使用者匿名登入的配置
在完成了基礎的使用者登入後，就可以編寫具體的上傳代碼了。
在具體的實作過程中，我在頁面中放置了一個按鈕，用作圖檔選擇，并放置一個 Button 用來确認選擇，并送出選擇。具體的頁面結構代碼如下:
有了頁面的代碼，我們就可以通過編寫代碼來擷取我們所選擇的檔案，并将其上傳到雲存儲中，獲得通路連結。
具體的擷取檔案的代碼如下：
當我們拿到資料以後，我們就可以借助 <code>app.uploadFile</code>将其上傳到雲存儲中，實作本地檔案的上傳。
以及，如果你在上傳完成後，希望擷取到圖檔的下載下傳位址，則可以調用 <code>app.getTempFileURL</code> 來擷取圖檔的通路位址。
在完成了基礎功能的編寫後，我們可以借助雲開發提供的靜态托管能力，快速将項目部署上線。
在雲開發控制台中開通靜态托管服務：
并安裝 Cloudbase Framework ,來實作快速部署：
根據提示，完成部署，就可以看到我們的項目的通路位址。
通過引入 tcb-js-sdk ，我們可以十分友善的在 Web 應用中引入雲開發的檔案存儲系統。對于前端來說，可以更加簡單的完成資料存儲相關邏輯的編寫，對于前端開發者來說，十分的友好，特别是一些快節奏的業務開發，可以借助 tcb-js-sdk 實作業務需求。
文章的項目源碼： https://github.com/Handsomedoggy/cloudbase-image-upload-example
【産品介紹】雲開發（CloudBase）是雲端一體化的後端雲服務，采用 serverless 架構，免去了移動應用建構中繁瑣的伺服器搭建和運維。同時雲開發提供的靜态托管、指令行工具（CLI）、Flutter SDK 等能力極大的降低了應用開發的門檻。使用雲開發可以快速建構完整的小程式/小遊戲、H5、Web、移動 App 等應用。
技術文檔：https://cloudbase.net?from=10004