前端丨如何使用 tcb-js-sdk 實現圖片上傳功能

前言

tcb-js-sdk 讓開發者可以在網頁端使用 JavaScript 程式碼服務訪問雲開發的服務，以輕鬆構建自己的公眾號頁面或者獨立的網站等 Web 服務。本文將以實現圖片上傳功能為例，介紹 tcb-js-sdk 的基本配置流程。

在使用雲開發 Cloudbase 開發應用的過程中，除了藉助雲開發提供的資料庫儲存資料以外，常常還會遇到需要實現圖片上傳功能的需求，在這種情況下，可以通過 tcb-js-sdk 來完成圖片上傳的功能。接下來，我們來開發一個簡易的圖片上傳功能，作為演示。

主要流程：

1. 引入 tcb-js-sdk

想要使用 tcb-js-sdk 來完成開發，我們需要在專案中引入 tcb-js-sdk ，從而可以藉助其提供的 API 實現簡單的呼叫雲開發各項能力。

在具體的接入時，可以根據你的專案型別，選擇使用 CDN 接入還是通過包管理器接入，這裡我使用 CDN 來完成接入。

在專案中新增如下程式碼，並根據 NPM 上的說明，選擇最新版本的 SDK ，比如當前最新版本是 1.7.1 版本，就可以將下方程式碼中的 ${version} 替換為 1.7.1 。

```html

const app = tcb.init({ env: 'your-env-id' //填寫雲環境ID }); const auth = app.auth();

```

2. 配置使用者登入

雲開發的 API 呼叫需要使用者具備身份，為了簡化，這裡我選擇使用匿名登入，這樣就可以更簡單的完成專案的開發。關於匿名登入的使用者配置，你可以在雲開發的官方文件中找到相關的說明。當你將你的登入配置成這樣的時候，就說明配置好了使用者登入。

此外，你還需要將需要呼叫雲開發 SDK 的網頁配置到安全域名中，從而確保可以正常呼叫 API 介面。

在完成了使用者登入的配置以後，可以在專案程式碼中加入使用者匿名登入的配置

```html const app = tcb.init({ env: 'your-env-id' //填寫雲環境ID }); const auth = app.auth();

auth.anonymousAuthProvider().signIn() // 匿名登入，實際業務時根據需要進行調整 .then(() => { console.log("登陸成功") //登入成功 }).catch(err => { console.log("登入失敗",err) //登入失敗 }) ```

3. 編寫上傳程式碼

在完成了基礎的使用者登入後，就可以編寫具體的上傳程式碼了。

在具體的實現過程中，我在頁面中放置了一個按鈕，用作圖片選擇，並放置一個 Button 用來確認選擇，並提交選擇。具體的頁面結構程式碼如下:

```html

```

有了頁面的程式碼，我們就可以通過編寫程式碼來獲取我們所選擇的檔案，並將其上傳到雲端儲存中，獲得訪問連結。

具體的獲取檔案的程式碼如下：

``` var fileinput = document.getElementById('pic'), preview = document.getElementById('preview'); // 獲取物件 fileinput.addEventListener('change',function(){//監聽 input 的 change事件 if (!fileinput.value) { // 判斷當前是否有檔案 console.log('no pic'); return; } else{ console.log('success') } var file = fileinput.files[0];//如果有，則獲取到檔案 if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/jpg') {//判斷檔案是否符合img alert('僅支援jpeg和png'); fileinput.value = '';//如不符合則清空value以及backgroundImage preview.style.backgroundImage = 'url(#)'; return; }else{ var reader = new FileReader(); reader.onload = function(e){ var data = e.target.result; preview.style.backgroundImage = 'url(' + data + ')'; } reader.readAsDataURL(file); console.log(file.name) }

}) ```

當我們拿到資料以後，我們就可以藉助 app.uploadFile將其上傳到雲端儲存中，實現本地檔案的上傳。

javascript function upload(){ app .uploadFile({ // 雲端路徑 cloudPath: document.getElementById('pic').files[0].name, // 需要上傳的檔案，File 型別 filePath: document.getElementById('pic').files[0] }) .then(res => { // 返回檔案 ID console.log(res.fileID) console.log('上傳成功') }) }

以及，如果你在上傳完成後，希望獲取到圖片的下載地址，則可以呼叫 app.getTempFileURL 來獲取圖片的訪問地址。

javascript app .getTempFileURL({ fileList: [res.fileID]//要下載的檔案 ID 組成的陣列 本示例填寫為上面程式碼的檔案id }) .then(res => { res.fileList.forEach((el) => { if(el.code === 'SUCCESS') { console.log(el.tempFileURL)//列印下載地址 } else { console.log('獲取地址失敗')//獲取地址失敗 } }) }); }

4. 部署應用上線

在完成了基礎功能的編寫後，我們可以藉助雲開發提供的靜態託管能力，快速將專案部署上線。

在雲開發控制檯中開通靜態託管服務：

並安裝 Cloudbase Framework ,來實現快速部署：

bash npm install -g @cloudbase/cli@beta # 安裝 cloudbase framework cloudbase login # 登入 cd 專案目錄 cloudbase init --without-template # 初始化部署模板 cloudbase framework:deploy # 部署專案

根據提示，完成部署，就可以看到我們的專案的訪問地址。

總結

通過引入 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 技術交流加Q群：601134960 最新資訊關注微信公眾號【騰訊云云開發】