GoodNight

Take A Rest

Typora结合腾讯云COS实现Markdown文档图片自动上传

下面参考链接中,腾讯云大学给的流程步骤已经够详细够小白了。

但我在实现的过程中还是有些出入,所以我在此记录一下。(文中很多图片直接用的腾讯云大学文档中的图片,如有侵权,请联系我删除)

存储桶创建

  1. 访问腾讯云对象存储COS的控制台,进入 存储桶列表 页面。
  2. 创建存储桶

img

  1. 在存储桶中创建文件夹,文件名随意

img

  1. 获取存储桶相关信息(敲黑板,这是重点,后面要考的)

img

image-20200714093845099

子用户创建与密钥获取

建议创建一个专门用于向腾讯云COS传图片的用户。

  1. 前往访问管理页面,创建子用户

    前往访问管理CAM的 用户列表 页面。

    1)新建用户

    img

    2)自定义创建

    img

    3)选择子用户类型

    img

    4)填写用户信息

    img

    5)设置用户权限,接下来的操作只涉及到对象存储COS的读写操作,此处也只需授予相关的权限。

    在策略列表中勾选 QcloudCOSDataReadOnly(对象存储COS数据只读的访问权限)和QcloudCOSDataWriteOnly(对象存储COS数据只写的访问权限):

    img

    最后一步,审阅用户权限,确认前面配置的所有信息无误后,点击 “完成” 按钮,即可完成子用户的创建。

  2. 获取子用户密钥

    我个人觉得可以给子用户绑定邮箱,密钥通过邮箱的方式获取,也可在页面上查看。

    完成刚才的用户创建后,不要跳出页面,在当前页面中便可以获取到用户密钥(需要获取的信息为SecretIdSecretKey):

    img

Typora插件实现图片自动上传

该插件项目地址:Thobian/typora-plugins-win-img

在git上下载插件到本地。

git clone https://github.com/Thobian/typora-plugins-win-img.git
  1. 将插件中的plugins文件夹

    img

    复制到你的Typora软件目录/Typora/resources/app

    image-20200714094955892

  2. 修改window.html文件

    在文件中找到,下面那段代码

    <script src="./app/window/frame.js" defer="defer"></script>

    在这段代码后面加上,

    <script src="./plugins/image/upload.js" defer="defer"></script>
  3. 进入/Typora/resources/app/plugins/image文件夹下,(也就是刚复制过去的plugins文件中),找到upload.js

    image-20200714095510779

  4. 找到最后一行,会有个

    $.image.init({})

    在里面添加参数信息。

    $.image.init({
    // 只有下面这里需要设置,上面不需要进行设置
    target:'tencent',
    tencent : {
    // 必须参数,如果你有自己的腾讯云COS改成自己的配置
    // Bucket获取:对象存储->存储桶列表(存储桶名称就是Bucket)
    Bucket: '<此处填写你的存储桶名>',
    // SecretId获取:访问控制->用户->用户列表->用户详情->API密钥
    SecretId: '<此处填写你的SecretId>',
    // SecretKey获取:访问控制->用户->用户列表->用户详情->API密钥
    SecretKey: '<此处填写你的SecretKey>',
    // Region获取:对象存储->存储桶列表(所属地域中的英文就是Region)
    Region: '<此处填写你的所属区域>',
    // Folder获取:对象存储->存储桶列表->存储桶文件夹
    Folder: '<此处填写你创建的文件夹名>',
    },
    });

    注意,填好参数后,把注释删掉!!!我是这么写的

    $.image.init({
    target:'tencent',
    tencent : {
    Bucket: 'mdpic-xxxxxxx',
    SecretId: 'xxxxxxxxxxxxxxxxxxxxxxx',
    SecretKey: 'xxxxxxxxxxxxxxxxxxxxxx',
    Region: 'ap-shanghai',
    Folder: 'night',
    },
    });

    需要的参数上面敲黑板提到过。

插件可能出现的问题

问题1:注意,如果将Typora软件更新的话,该插件需要重新配置。

问题2:关于插件可能出现重复上传图片的问题,Typora可以这样设置:

image-20200714100612426

image-20200714100824307

问题3:如果发现不能发现插件不能正常运行,可以打开Typora软件中的开发者工具调试一下,看看问题出在哪,或者去作者的gittub中的issue里看看别人有没有相同的问题。

image-20200714100357537

参考链接

利用腾讯云COS作为图床为Markdown文档提供图片链接 | 腾讯云大学

typora-plugins-win-img | github


写文不易,如需转载,请注明出处。

注意文章编写时间,一切以官方文档为主。

如果某处写的有问题,欢迎发邮件,一起交流讨论,共同进步。