使用阿里云OSS保存上传到Typora的图片(超详细教程)

事情起因

  经常在Windows用typora写博客的小伙们一定遇到过一个问题:不管是用截图工具截图后直接粘贴,还是通过选择文件夹选择图片的方式,在typora下都会是图片的本地链接,并不会给你上传到远程服务器。
  这个问题就会导致自己辛辛苦苦写好的文章在想发给好兄弟们炫耀时,对方却完全看不到那些图片,只会显示你本地的保存路劲(还会泄露自己本地信息)。

PS:解决方式:
(1)将markdown文件转换为PDF格式再发送;
(2)设置typora插入图片时使用相对位置,并把它复制到指定的目录下,再发送给别人的时候连带图片文件一起发送过去;

 不过作为一名码农,这样的方式显然不符合身份((~ ̄▽ ̄)~~),于是再BiliBili和Github的探索后,学会了使用阿里云OSS远程存储图片;

使用方式

这里需要使用到两个工具:
Github上的开源插件typora-plugins-win-img
阿里云的对象存储 OSS

Github上开源插件typora-plugins-win-img


  直接打开上面的Github链接,将整个代码压缩包下载下来,原插件博客有详细使用说明,下面将以阿里云OSS为案例详细说明;

阿里云对象存储OSS

1.创建 OSS Bucket

  (1) 在阿里云中找到并进入对象存储oss

  (2) 根据自己的需求创建一个Bucket

2.绑定域名

 (1)点击 Bucket 列表,进入到刚刚创建好的Bucket中
 (2)在左侧菜单栏中找到 Bucket 配置/域名管理
 (3)绑定域名,点击域名绑定配置,获取 OSS 访问域名
 (4)复制保存OSS访问域名备用
  PS:记得根据自己需求购买资源包,不买上传不成功的



3.进入RAM访问控制台

  (1)创建用户(注意一定要勾选OpenAPI 调用访问这个选项)
  (2)创建 AccessKey,保存获得的AccessKey ID和AccessKey Secret








修改Typora配置文件

在获取OSS访问域名、AccessKey ID和AccessKey Secret之后,我们就可以将插件typora-plugins-win-img添加到Typroa配置文件中

  打开下载好的插件压缩包,将其中的plugins文件夹复制到Typora安装目录下的resources文件夹中

  打开resources文件夹中的window.html文件,打开resources文件夹中的window.html文件,<script src=“./app/window/frame.js” defer=“defer”> 在其后面加上一行:<script src=“./plugins/image/upload.js” defer=“defer”>

  打开编辑plugins\image\upload.js文件,将原先保存的自己的OSS访问域名、AccessKey ID和AccessKey Secret替换上去(注意要将target:'aliyun’也设置好,这样才是使用阿里云的OSS存储空间)

 保存退出,重启Typoran之后,你就会发现上传的图片资源自动上传到了OSS中了


个人博客本文地址:http://www.frblogger.cn/2024/01/29/oss_typora/

最近更新

  1. TCP协议是安全的吗?

    2024-01-31 16:42:01       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-31 16:42:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-31 16:42:01       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-31 16:42:01       20 阅读

热门阅读

  1. 程序员能靠技术度过35岁危机吗?

    2024-01-31 16:42:01       39 阅读
  2. RabbitMQ-中死信交换机

    2024-01-31 16:42:01       36 阅读
  3. js 递归过滤接口数据

    2024-01-31 16:42:01       36 阅读
  4. 聊一聊我是怎么学习单片机的

    2024-01-31 16:42:01       33 阅读
  5. PandaWallet :Web3.0世界的入口

    2024-01-31 16:42:01       32 阅读
  6. pg数据库替换指定ip

    2024-01-31 16:42:01       35 阅读
  7. Android Studio六大基本布局详解

    2024-01-31 16:42:01       28 阅读