通过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控制台创建一个服务空间，可自由选择阿里云和腾讯云，建议选择阿里云。

image

然后通过HBuilderX打开之前创建的项目，在项目的根目录上右键，选择创建uniCloud云开发环境，然后选择阿里云或腾讯云进行创建。

image

最后在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家族的好处现在就体现出来了，连页面托管都给你准备好了，去控制台开通直接用就是了。

image

现在一个有基本功能的图片管理平台就算完成了。根据uniCloud官方的的提示：为了避免资源滥用，我的项目没有开源。大家可以自行搭建，仅限于正规的学习与交流哦。

其他方法

...客官，别急！！！

image

如果你觉得上面的教程写得太烂了，看不懂，也没关系。那我就再分享两个简单粗暴的方法吧！

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
|--------------------------|------|------|----|-------------------------------|
固定地址 + 用户名 + 仓库名 + 分支 + 文件路径

其实也还有很多第三方工具，可以同时支持很多平台的图片上传。不过我觉得有这几种方法完全够用了，而且可靠性相对都是比较高的，也不用担心时间久了图片挂掉。

完了

如果你有更好的方法推荐，欢迎在评论区留言讨论。

最后，感谢阅读！也可关注我的公众号【末日码农】，我们一起学习、一起进步！