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

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

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

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

然而，markdown 中插入图片是重大依赖于在线可拜访的图片的。如果没有一个专门的图片管理工具，要插入一张图片还真的很折腾人。

得益于当初 云开发 概念的衰亡，前端小伙伴们的全栈之路变得轻松了许多。

不必搭服务器、不必管数据库、不必买 OSS、甚至都不必学 Linux 了；当然，最要害的还是这所有都变得“收费”了！

不论是阿里云、还是腾讯云，每个月都是有收费的额度的。就算额度超了，按量计费也是十分的划算。反正，我是没超过。

uniCloud就是基于阿里云和腾讯云，为开发者提供的一个云开发平台。为什么抉择 uniCloud 呢？次要是得益于 uni 家族的整个生态，能够完满的衔接起来。从开发到部署的整个流程全副都给你筹备好了，只管用就是了。

你能够抉择 uni 官网举荐的 HBuilderX 创立，也能够抉择 cli 命令行模式，更多可参考官网文档。

上面是通过 cli 命令行创立 vite + ts + vue3 的我的项目模板：

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

去 uniCloud 控制台创立一个服务空间，可自由选择阿里云和腾讯云，倡议抉择 阿里云。

而后通过 HBuilderX 关上之前创立的我的项目，在我的项目的根目录上右键，抉择 创立 uniCloud 云开发环境，而后抉择阿里云或腾讯云进行创立。

最初在 uniCloud 文件夹上右键，与之前创立的云服务空间进行关联。

次要步骤是先通过 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 值进行比拟。当然这个性能可做可不做，无伤大雅。

如果你想将所有上传的图片信息都保存起来，不便下次应用或者是在不同设施之间放弃同步，那就必须将每次上传后的图片地址以及图片相干信息保留在云数据库了。

好在 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);
}

间接上代码：

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);
}

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

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

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

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

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

介绍

开搞

2.1 创立我的项目

2.2 创立云服务空间

2.3 上传图片

2.4 图片信息存入数据库

2.5 读取图片列表

2.6 部署上线

其余办法

完了