关于前端:通过uniCloud白捡一个在线图库管理工具可做图床外链

喜爱写文章的技术大佬们，应该都有一个本人的在线图片管理工具吧。

尤其是在写markdown时，为了让咱们的文章“图文并茂”，显得不那么干燥，就常常须要在适合的中央插入一些关联性的图片。

据（xia）说（shuo）图片还能无效缩小读者的视觉疲劳，使大脑有一个短暂的缓冲成果。

然而，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 {
  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官网的的提醒：为了防止资源滥用，我的我的项目没有开源。大家能够自行搭建，仅限于正规的学习与交换哦。

其余办法

&＃8230;客官，别急！！！

如果你感觉下面的教程写得太烂了，看不懂，也没关系。那我就再分享两个简略粗犷的办法吧！

1. Github
2. 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
|--------------------------|------|------|----|-------------------------------|
固定地址 + 用户名 + 仓库名 + 分支 + 文件门路

其实也还有很多第三方工具，能够同时反对很多平台的图片上传。不过我感觉有这几种办法齐全够用了，而且可靠性绝对都是比拟高的，也不必放心工夫久了图片挂掉。

完了

如果你有更好的办法举荐，欢送在评论区留言探讨。

最初，感激浏览！也可关注我的公众号【末日码农】，咱们一起学习、一起提高！