通過uniCloud白撿一個在線圖庫管理工具，可支持圖床外鏈-有解無憂

喜歡寫文章的技術大佬們，應該都有一個自己的在線圖片管理工具吧，

尤其是在寫markdown時，為了讓我們的文章“圖文并茂”，顯得不那么枯燥，就經常需要在合適的地方插入一些關聯性的圖片，

據說圖片還能有效減少讀者的視覺疲勞，使大腦有一個短暫的緩沖效果，

假裝有圖片

然而，markdown中插入圖片是嚴重依賴于在線可訪問的圖片的，如果沒有一個專門的圖片管理工具，要插入一張圖片還真的很折騰人，

介紹

得益于現在云開發概念的興起，前端小伙伴們的全堆疊之路變得輕松了許多，

不用搭服務器、不用管資料庫、不用買OSS、甚至都不用學Linux了；當然，最關鍵的還是這一切都變得“免費”了！

不管是阿里云、還是騰訊云，每個月都是有免費的額度的，就算額度超了，按量計費也是非常的劃算，反正，我是沒超過，

uniCloud就是基于阿里云和騰訊云，為開發者提供的一個云開發平臺，為什么選擇uniCloud呢？主要是得益于uni家族的整個生態，可以完美的銜接起來，從開發到部署的整個流程全部都給你準備好了，只管用就是了，

開搞

2.1 創建專案

你可以選擇uni官方推薦的HBuilderX創建，也可以選擇cli命令列模式，更多可參考官方檔案，

下面是通過cli命令列創建vite + ts + vue3的專案模板：

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

2.2 創建云服務空間

去uniCloud控制臺創建一個服務空間，可自由選擇阿里云和騰訊云，建議選擇阿里云，

然后通過HBuilderX打開之前創建的專案，在專案的根目錄上右鍵，選擇創建uniCloud云開發環境，然后選擇阿里云或騰訊云進行創建，

最后在uniCloud檔案夾上右鍵，與之前創建的云服務空間進行關聯，

2.3 上傳圖片

主要步驟是先通過uni.chooseImage方法選擇本地圖片，然后再利用uniCloud的APIuniCloud.uploadFile方法將圖片上傳到云存盤中去，

呼叫uniCloud的API必須先在專案中進行初始化，也就是跟你開通的云空間關聯起來，

uniCloud初始化：

// ... 其他代碼已省略
onLaunch() {
  // 云空間初始化
  uniCloud.init({
    provider: 'aliyun',
    spaceId: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
    clientSecret: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
  });
},

spaceId和clientSecret到uniCloud控制臺去獲取，

上傳圖片到云存盤：

const res = await uniCloud.uploadFile({
  filePath: file.path,
  cloudPath: `${hash}/${file.name}`,
  onUploadProgress: (res) => {
    const { loaded, total } = res;
    console.log(loaded, total);
    this.$set(this.imgList[0], 'uploadPercent', (loaded / total) * 100);
  },
});

console.log('檔案上傳成功', res);

為了防止檔案重復上傳，在上傳之前先計算出檔案的MD5碼作為hash值，與已上傳的檔案hash值進行比較，當然這個功能可做可不做，無傷大雅，

2.4 圖片資訊存入資料庫

如果你想將所有上傳的圖片資訊都保存起來，方便下次使用或者是在不同設備之間保持同步，那就必須將每次上傳后的圖片地址以及圖片相關資訊保存在云資料庫了，

好在uniCloud的資料庫也是免費的，不用白不用，而且還支持在客戶端直接操作資料庫，云函式這些都省了，簡直不要太方便，

首先要創建一個資料表，可以在uniCloud控制臺創建，也可以直接通過代碼創建，為了簡單，推薦直接去控制臺創建吧，參考檔案，

在前端直接操作資料庫，需要定義表結構DB Schema，這樣在插入資料的時候，就可以自動進行一些欄位的校驗了，

將圖片資訊插入資料庫：

interface Album {
  _id?: string;
  name: string;
  url: string;
  hash: string;
  createAt?: number;
  updateAt?: number;
}

export function saveAlbum(data: Album) {
  const collection = uniCloud.database().collection('你創建的表名稱');
  return collection.add(data).then(({ result }: any) => result);
}

2.5 讀取圖片串列

直接上代碼：

interface AlbumListQuery extends Partial<Album> {
  pageIndex?: number,
  pageSize?: number,
}

export function getAlbumList(query?: AlbumListQuery) {
  const collection = uniCloud.database().collection('你創建的表名稱');
  const { pageIndex = 1, pageSize = 20, ...data } = query || {};
  return collection.where(data).orderBy('updateAt', 'desc').orderBy('createAt', 'desc').skip(pageSize * (pageIndex - 1)).limit(pageSize).get().then(({ result }: any) => result);
}

2.6 部署上線

uni家族的好處現在就體現出來了，連頁面托管都給你準備好了，去控制臺開通直接用就是了，

現在一個有基本功能的圖片管理平臺就算完成了，根據uniCloud官方的的提示：為了避免資源濫用，我的專案沒有開源，大家可以自行搭建，僅限于正規的學習與交流哦，

其他方法

...客官，別急！！！

如果你覺得上面的教程寫得太爛了，看不懂，也沒關系，那我就再分享兩個簡單粗暴的方法吧！

Github
Gitee

沒錯，就是這兩個家伙！

你只要把圖片放在倉庫中就行了！

一句代碼都不用寫，一個命令也都不用敲，而且Github上的圖片是通過jsdelivr來訪問的，也完全不用擔心速度問題，

這是我隨便創建的兩個倉庫，可供參考：

https://gitee.com/moohng/cdn

https://github.com/moohng/bucket

使用方法：

https://gitee.com/moohng/cdn/raw/master/README.md
|     固定地址    |用戶名|倉庫名|--|分支名|檔案路徑

https://cdn.jsdelivr.net/gh/moohng/bucket@main/1627887240043-Javascript_01.jpg
|--------------------------|------|------|----|-------------------------------|
固定地址 + 用戶名 + 倉庫名 + 分支 + 檔案路徑

其實也還有很多第三方工具，可以同時支持很多平臺的圖片上傳，不過我覺得有這幾種方法完全夠用了，而且可靠性相對都是比較高的，也不用擔心時間久了圖片掛掉，

完了

如果你有更好的方法推薦，歡迎在評論區留言討論，

最后，感謝閱讀！也可關注我的公眾號【末日碼農】，我們一起學習、一起進步！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/445533.html

標籤：Html/Css

上一篇：SAP WM高階之同一個貨架上相同物料不同批次的庫存可以有同一個SU號碼？

下一篇：new Date 兼容性問題