喜欢写文章的技术大佬们,应该都有一个自己的在线图片管理工具吧。

尤其是在写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',
});
},

spaceIdclientSecret到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官方的的提示:为了避免资源滥用,我的项目没有开源。大家可以自行搭建,仅限于正规的学习与交流哦。

其他方法

...客官,别急!!!

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

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

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

完了

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

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

通过uniCloud白捡一个在线图库管理工具,可支持图床外链的更多相关文章

  1. 你不得不知的几款常用的在线API管理工具

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...

  2. 几款常用的在线API管理工具(是时候抛弃office编写接口文档了)

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...

  3. 介绍几款常用的在线API管理工具

    在项目开发过程中,总会涉及到接口文档的设计编写,之前使用的都是ms office工具,不够漂亮也不直观,变更频繁的话维护成本也更高,及时性也是大问题.基于这个背景,下面介绍几个常用的API管理工具,方 ...

  4. ColorCode是一个在线随机取色工具,可以随机获取十六进制、RGB、HSl等颜色。

    ColorCode是一个在线随机取色工具,可以随机获取十六进制.RGB.HSl等颜色. ColorCode 彩蛋爆料直击现场 ColorCode是一个在线随机取色工具,可以随机获取十六进制.RGB.H ...

  5. 在线接口管理工具-eoapi

    为了方便和前端沟通,临时在局域网搭建了一个接口管理工具,查了一些资料都说eoapi不错,那就试了一下: 1.安装 要在服务器或者自己的电脑,准备web环境,Linux可以是Apache/nginx , ...

  6. 基于七牛云对象存储,搭建一个自己专属的极简Web图床应用(手摸手的注释讲解核心部分的实现原理)

    一个极简的Web图床应用,支持复制粘贴与拖拽上传图片 1.开发缘由 日常使用Vs Code编写markdown笔记与博客文章时,在文章中插入图片时发现非常不便 使用本地文件编写相对路径---没法直接复 ...

  7. .NET 开发一个服务器 应用管理工具

    一:背景 1.Anno.Deploy Anno.Deploy可以和 Anno集成使用,用于部署新的服务.启动服务.停止服务.清理服务.也可以单独使用,用于守护程序. 使用方法 1.和Anno集成使用 ...

  8. 团队服务器搭建(搭建php环境和安装在线mysql管理工具phpmyadmin)

    1.本人良心推荐阿里云,因为他对学生来说优惠很多,比如说9.9/月的云主机,所以这里演示阿里云ubuntu系统,系统可以自己安装的 2.来到阿里云官网https://www.aliyun.com,免费 ...

  9. mongodb在线web管理工具

    随着云计算,大数据等技术的不断发展,需要服务应用都朝着网络化,在线化的方向演进,数据库管理,数据库维护,数据可视化等也是这种趋势.MonggoDB,MySQL的在线管理,已成为一种强烈的需求,使用Tr ...

随机推荐

  1. tp5 全选,全不选 ,ajax批量删除

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSRF、DDos避免方式

    XSS(Cross-Site Scripting,跨站脚本攻击)是一种代码注入攻击.攻击者在目标网站上注入恶意代码,当被攻击者登陆网站时就会执行这些恶意代码,这些脚本可以读取 cookie,sessi ...

  3. Cocoapods插件机制浅析

    原文链接 背景 虽然做iOS开发的过程中使用过 Cocoapods, 但是对里面的细节了解其实不算太多,直到这两年做织女项目时,通过对Cocoapods进行Qt支持改造才开始深入了解部分细节,这个过程 ...

  4. 4月24日 python学习总结 多进程与子进程

    一.进程 并发的本质: cpu切换进程+保存状态 一个程序执行了多次,就启动了多个进程 进程与进程之间的内存空间是隔离开的 二.在一个进程中开启子进程 新进程的创建都是由一个已经存在的进程执行了一个用 ...

  5. Linux C申请内存三种基本方式

    一份代码可以知道具体方式和原理: int main() { int stack_a; int stack_b; static int static_c; static int static_d; in ...

  6. MM32F0140的复位脚nRST复用成普通GPIO PA10功能

    目录: 1.MM32F0020简介 2.MM32F0020的复位脚nRST和PA10的说明 3.MM32F0020的选项字节说明 4.MM32F0020的FLASH_OBR选项字节寄存器说明 5.MM ...

  7. 创建自定义ClassLoader,绕过双亲委派

    1.什么是类加载 通过javac将.java文件编译成.class字节码文件后,则需要将.class加载到JVM中运行,哪么是谁将.class加载到JVM的呢?那就是类加载器啦. 2.类加载器类型 B ...

  8. BASH和DOS之间的基本区别是什么?

    BASH和DOS控制台之间的主要区别在于3个方面:1. BASH命令区分大小写,而DOS命令则不区分;2. 在BASH下,/ character是目录分隔符,\作为转义字符.在DOS下,/用作命令参数 ...

  9. 是否使用过 Redis 集群,集群的原理是什么?

    1).Redis Sentinal 着眼于高可用,在 master 宕机时会自动将 slave 提升为 master,继续提供服务. 2).Redis Cluster 着眼于扩展性,在单个 redis ...

  10. springmvc组件组成以及springmvc的执行过程

    springmvc三大组件 处理器映射器:用户请求路径到Controller方法的映射 处理器适配器:根据handler(controlelr类)的开发方式(注解开发/其他开发) 方式的不同区寻找不同 ...