通过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/raw/master/README.md
| 固定地址 |用户名|仓库名|--|分支名|文件路径
https://cdn.jsdelivr.net/gh/moohng/bucket@main/1627887240043-Javascript_01.jpg
|--------------------------|------|------|----|-------------------------------|
固定地址 + 用户名 + 仓库名 + 分支 + 文件路径
其实也还有很多第三方工具,可以同时支持很多平台的图片上传。不过我觉得有这几种方法完全够用了,而且可靠性相对都是比较高的,也不用担心时间久了图片挂掉。
完了
如果你有更好的方法推荐,欢迎在评论区留言讨论。
最后,感谢阅读!也可关注我的公众号【末日码农】,我们一起学习、一起进步!
通过uniCloud白捡一个在线图库管理工具,可支持图床外链的更多相关文章
- 你不得不知的几款常用的在线API管理工具
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
- 几款常用的在线API管理工具(是时候抛弃office编写接口文档了)
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
- 介绍几款常用的在线API管理工具
在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...
- ColorCode是一个在线随机取色工具,可以随机获取十六进制、RGB、HSl等颜色。
ColorCode是一个在线随机取色工具,可以随机获取十六进制.RGB.HSl等颜色. ColorCode 彩蛋爆料直击现场 ColorCode是一个在线随机取色工具,可以随机获取十六进制.RGB.H ...
- 在线接口管理工具-eoapi
为了方便和前端沟通,临时在局域网搭建了一个接口管理工具,查了一些资料都说eoapi不错,那就试了一下: 1.安装 要在服务器或者自己的电脑,准备web环境,Linux可以是Apache/nginx , ...
- 基于七牛云对象存储,搭建一个自己专属的极简Web图床应用(手摸手的注释讲解核心部分的实现原理)
一个极简的Web图床应用,支持复制粘贴与拖拽上传图片 1.开发缘由 日常使用Vs Code编写markdown笔记与博客文章时,在文章中插入图片时发现非常不便 使用本地文件编写相对路径---没法直接复 ...
- .NET 开发一个服务器 应用管理工具
一:背景 1.Anno.Deploy Anno.Deploy可以和 Anno集成使用,用于部署新的服务.启动服务.停止服务.清理服务.也可以单独使用,用于守护程序. 使用方法 1.和Anno集成使用 ...
- 团队服务器搭建(搭建php环境和安装在线mysql管理工具phpmyadmin)
1.本人良心推荐阿里云,因为他对学生来说优惠很多,比如说9.9/月的云主机,所以这里演示阿里云ubuntu系统,系统可以自己安装的 2.来到阿里云官网https://www.aliyun.com,免费 ...
- mongodb在线web管理工具
随着云计算,大数据等技术的不断发展,需要服务应用都朝着网络化,在线化的方向演进,数据库管理,数据库维护,数据可视化等也是这种趋势.MonggoDB,MySQL的在线管理,已成为一种强烈的需求,使用Tr ...
随机推荐
- think php 富框架文本编辑器
商品的详细描述一般都是图文混合.对于图文混合的内容,需要使用富文本编辑器来实现. Ueditor富文本编辑器的下载地址: http://ueditor.baidu.com/website/downlo ...
- php 23种设计模型 - 桥接模式
桥接模式(Bridge) 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦. 这种模式涉 ...
- 基于Python实现二分查找法实战
二分查找法实战 def binary_search(datasets, find_in): mid = int(len(datasets)/2) if(mid>0): if(find_in> ...
- vmware下的manjaro挂载共享文件夹
开始时在archwiki上看到的是以下命令 mkdir <shared folders root directory> vmware-hgfsclient vmhgfs-fuse -o a ...
- 使用.Net6中的System.Text.Json遇到几个常见问题及解决方案
前言 以前.NetCore是不内置JSON库的,所以大家都用Newtonsoft的JSON库,而且也确实挺好用的,不过既然官方出了标准库,那更方便更值得我们多用用,至少不用每次都nuget安装Newt ...
- Arcgis更新sde库许可
概述 一般来说SDE的试用许可我会建议用户在没有到期之前进行续期,也就是更新许可.否则的话,如果SDE试用许可到期了,除了PostgresSQL数据库之外,我们只能通过SQL语句的方式来进行更新.在到 ...
- 在 Kubernetes 上快速测试 Citus 分布式 PostgreSQL 集群(分布式表,共置,引用表,列存储)
准备工作 这里假设,你已经在 k8s 上部署好了基于 Citus 扩展的分布式 PostgreSQL 集群. 查看 Citus 集群(kubectl get po -n citus),1 个 Coor ...
- 突发!Gitee 图床,废了!
大家好,我是鱼皮,这两天又发生了一件挺意外的事情:Gitee 的图床废了! 图床:指储存图片的服务器,便于在网上展示图片 昨天晚上,星球里不止一位小伙伴发帖子表示自己网站.文章中的图片竟然全部变成了 ...
- fiber核心(react 16)?
旧: 浏览器渲染引擎单线程, 计算DOM树时锁住整个线程, 所有行为同步发生, 有效率问题, 期间react会一直占用浏览器主线程,如果组件层级比较深,相应的堆栈也会很深,长时间占用浏览器主线程, 任 ...
- jvm-learning-类加载子系统
类加载子系统的作用 类加载器ClassLoader角色 类的加载过程(广义加载) 加载 加载.class文件的方式 连接Linker 初始化 注意:如果类种没有变量赋值动作和静态代码块的语句是不 ...