在markdown中使用图床+七牛云存储实现快速外链贴图

本文介绍了一种使用第三方云服务简化Markdown文档中图片上传流程的方法,通过极简图床结合七牛云存储,使得图片的管理和引用更为便捷。

近年来,markdown编辑器的受欢迎度是越来越高,在很多博客网站上已经可以使用markdown进行内容编辑,我之前尝试使用它来编辑文档,后来发现虽然其语法简单,展示效果简洁清新,但当我想要添加图片的时,却发现比较繁琐,我需要在本地建立一个文件夹,专门存放这篇文章所用到的图片,现在有一种更好的方法,采用第三方的云服务,将图片存放在云服务器上,废话不多说,准备工具:


  • 步骤1
    • 注册极简图床账号和七牛账号

  • 步骤2
    • 点击下方的按钮添加对象存储

  • 步骤3
    • 根据提示填写空间名称,存储区域,访问控制请选择公开访问

  • 步骤4
    • 创建成功后进入该空间,获取该空间的测试域名,复制后备用

  • 步骤5
    • 点击“个人面板—密钥管理”,获取 AK 和 SK,复制后备用

  • 步骤6
    • 打开极简图床,点击右上角设置按钮,将上面获得的“空间名称”、“AK”、“SK”,“域名”依次填写到下方的输入框中,点击保存。返回首页,再上传的图片就会默认上传至您的七牛云空间了。


  • 步骤7
    • 如果你开启了qq,那么可以使用ctrl+alt+a来实现截图,然后直接黏贴到图床首页,同时可以在七牛上看到该图片资源


  • 步骤8
    - 由于使用了极简图床,因此你可以直接从中复制markdown格式的外链地址,非常方便,直接插入,非常方便

这里使用了七牛云存储+极简图床进行贴图,当然你也可以只使用极简图床的贴图,不过由于这个服务上传的地址是一个公用的地址,有可能被删除或失效。因此极简图床也提供给我们自己设置七牛空间来上传图片,因此使用自己的七牛云存储空间会更加安全可靠

### 如何在七牛云中使用 Markdown 功能 #### 一、准备工作 为了实现 Markdown 中的图片存储并生成可直接使用接,需要完成以下准备事项: - 创建 **七牛云账号** 并登录管理控制台[^2]。 - 在七牛云中创建一个新的存储空间(Bucket),选择合适的存储区域[^4]。 - 如果计划长期使用,推荐绑定自定义域名并通过 SSL 认证以支持 HTTPS 协议访问[^3]。 --- #### 二、配置流程 ##### 1. 安装 PicGo 工具 PicGo 是一款轻量级工具,用于简化图片上传至云端的操作。可以通过以下方式安装: ```bash npm install -g picgo ``` 完成后运行 `picgo` 启动形界面或命令行模式。 ##### 2. 配置 PicGo 连接七牛云 打开 PicGo 的设置页面,在插件列表中找到 “Uploader” 插件,并启用它。随后按照提示输入以下参数: - Access Key (AK): 登录七牛云账户后获取的 AK; - Secret Key (SK): 对应的 SK; - Bucket Name: 刚才创建的存储空间名称; - Domain: 绑定的自定义域名或默认测试域名[^5]。 ##### 3. 测试连接与上传 点击 PicGo 提供的测试按钮确认配置无误。如果一切正常,则可以直接拖拽本地图片到 PicGo 界面进行上传。每次上传成功后,PicGo 将自动返回对应的 Markdown 格式接,形如: ```markdown ![image](https://your-domain.com/path/to/image.png) ``` ##### 4. 使用 Typora 或其他 Markdown 编辑器 某些 Markdown 编辑器(例如 Typora)内置了图片上传功能。可以在其偏好设置中指定服务为 PicGo,从而实现在编辑过程中一键上传图片。 --- #### 三、注意事项 - 若未绑定自定义域名,默认会使用七牛云提供的临时测试域名,该域名仅限短期试用,请及时替换为正式可用的域名。 - 当前主流浏览器普遍强制执行 HTTPS 加密传输策略,因此强烈建议为所选域名申请免费 SSL 证书。 - 考虑流量成本问题,合理规划每月数据下载额度以免超出免费范围而产生额费用。 --- ### 示例代码片段 以下是通过脚本调用 API 实现自动化上传的一个简单例子: ```javascript const qiniu = require('qiniu-js'); const key = 'example.jpg'; // 文件名 const token = 'your-upload-token'; // 获取上传凭证的方法详见官方文档 function uploadFile(filePath) { const observable = qiniu.upload( filePath, key, token, { mimeType: 'image/jpeg' } ); observable.subscribe({ next(res) { console.log(`Upload progress: ${res.total.percent}%`); }, error(err) { console.error('Error occurred:', err); }, complete(res) { console.log('Uploaded successfully!', res.key, res.hash); } }); } ``` ---
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值