一站式图床搭建:阿里云 OSS 与 PicGo 配置全攻略

在博客或文档中插入图片时,是否常为图床选择和上传问题烦恼?这篇文章将教你如何利用阿里云 OSS 和 PicGo 配置高效图床,轻松实现图片上传和管理!

目录

  1. 阿里云 OSS 配置
  2. PicGo 下载与配置
  3. Typora 配置
  4. Node.js 安装与配置

阿里云 OSS 配置

1. 登录阿里云控制台

首先登录阿里云控制台,点击右上角的 控制台 进入。

image-20250115173320223

2. 创建 OSS Bucket

在控制台中选择 对象存储 OSS,然后点击 创建 Bucket,按提示完成创建,并点击 完成创建

image-20250115175716434

注意: Bucket 名称不能包含大写字母。存储类型选择 标准存储,权限设置为 公共读

image-20250115181423142

3. 修改读写权限

进入创建的 Bucket 后,选择 概览,找到 读写权限 选项,设置为 公共读

image-20250115180813593

4. 获取访问域名

概览 页面下,找到 访问端口,复制访问域名(注意:不要复制 .aliyuncs.com 部分)。

oss-cn-beijing

image-20250115181550608

5. 创建 AccessKey

点击右上角头像,选择 AccessKey,然后创建一个新的 AccessKey,并记录下 AccessKeyIdAccessKeySecret

image-20250115181755481

点击继续使用

image-20250115181852493

创建一个AccessKey

image-20250115181930007

提示: 保存accessKeyIdaccessKeySecret这两个信息只能在创建时看到,后续无法查看,请务必保存好。

关于 阿里云Oss计费规则:

(1) 按量付费:后付费方式,先使用、后付费,按照各计费项的实际用量结算费用。(默认模式);

**(2) 购买资源包模式:**预付费方式,先预付、后使用,针对部分常用计费项(例如存储费用、流量费用)支持专用的资源包。流量额外收费

  • 储存容量:0.12元/GB/月
  • 图片上传到阿里OSS流量:免费
  • 外网流出流量(如typora访问图床图片):闲时0.25元/GB,时0.50元/GB 官方详情描述
image-20250115184133688

提醒: 然后给阿里云账户充值,充值保证账户正常,以免因欠费导致服务中断。

点击控制台,页面跳转后就会出现费用界面

image-20250115184518385

PicGo 下载与配置

要么是本地图片链接只能在本站网站访问,换一个平台,图片就裂了。Gitee在国内,访问速度快多了。

1.PicGo简介:

PicGo 是一款开源的图床管理工具,旨在简化图片上传过程,支持多种图床平台,包括阿里云 OSS、GitHub、七牛云等。PicGo 提供了图像上传、URL 复制、自动命名等功能,能够大幅提升图像管理效率,尤其适合程序员和博主等需要频繁插入图片的用户。

2. 下载与安装 PicGo

下载并安装 PicGo:笔者使用的版本是PicGo-Setup-2.3.1-x64.exe

PicGo安装(傻瓜式操作)

image-20250115162601118

2. 配置 PicGo

启动 PicGo 后,选择 图床设置 -> 阿里云 OSS,填写 AccessKey、Bucket 名称和存储区域,点击确定并设置为默认图床。

image-20250115192935673

3. 配置时间戳命名与 URL 自动复制

进入 PicGo 设置,启用时间戳命名和上传后自动复制图片 URL 的功能。

image-20250115193310679

Typora 配置

1. 配置图像上传

打开 Typora,选择 文件 -> 偏好设置 -> 图像,选择 上传图片,并在 上传服务 选择 PicGo (app)

image-20250115194135152

「允许根据 YAML 设置自动上传图片」:可以在每一个Markdown 文件单独设置规则,具体截图如下:

image-20250115194531897

选中图片后,右键选择 格式 -> HTML 格式,将图片以 HTML 形式插入。

image-20250115200611010

Node.js 安装与配置

因为PicGo是基于Node.js的,因此需要事先下载安装好node.js,笔者使用:Node.jsv16.16.0

1.安装 Node.js

Node.js下载链接(Gitee)

一直点next默认安装就行(可以自定义安装目录)

image-20250115164029853

2.安装成功检查

安装完成之后,如果弹出CMD窗口,直接回车即可,这些窗口的出现是因为下载一些配置文件。环境配置(14及以上版本可忽略,因为本身已经path环境变量里设置过了)

image-20250115164145916

检查是否安装成功:输入

node -v   查看node版本
npm -v    查看npm版本

报警告问题出现在,老方法被弃用了,可以忽略,对咱们得当前场景影响不大。

image-20250115171259562

通过上述步骤,你可以顺利地将阿里云 OSS 与 PicGo 配合使用,实现图片上传与管理,提升你的写作体验。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值