使用Visual Studio Code撰写Markdown文章，快速上传图片并对接大厂云图床

本文最后更新于：5 个月前

作者在折腾自己的新Blog时，发现想要做出一篇图文并茂的文章有亿点点困难，于是就想办法找了个快捷上传的插件，并顺带解决了速度的问题。

如果各位都像我一样，喜欢静态博客，但不喜欢CMS，喜欢VSCode撰写文章，还觉得托管在国外的静态平台速度太慢的话，不妨试试我的方法。

Markdown 在 Visual Studio Code 中的应用

Markdown 是一款十分优秀的标记型语言，可以满足很多种格式。在 Visual Studio Code 这个近乎万能的编辑器中，Markdown 也能优秀发挥。

打开 EXTENSIONS 选项卡，搜索 Markdown ，Markdown All in One 首当其冲。

Markdown All in One

安装完毕后，进入插件设置，建议大家打开 AutoShowPreviewToSide 选项，可以在打开 Markdown 文件的同时，在侧边也打开 Markdown 预览。

打开选项

在 Visual Studio Code 中，快捷上传图片

现在进入正题。在Markdown中插入图片，十分麻烦，必须写类似下面的代码，才能插入。

![image](https://www.baidu.com/favicon.png)

那么我们就需要一款插件，来实现快捷键快速粘贴图片等操作，照例打开EXTENSIONS选项卡，这里推荐两款，Markdown Image 和 PicGo。本文以Markdown Image为例（因为它能自定义上传接口）。

Markdown Image

安装后打开设置，我们可以看到这样一个选项，我们可以根据需求选择图床。直接推送到你的托管平台可以选择 Local ，不想折腾，对速度要求不高的可以选择 SM.MS Imgur 这两个图床，点开 Options ，根据提示注册并填入字段即可，但不符合本文高速的初衷，所以我们要选择自定义图床。

设置自定义图床

对接国内大厂的伪图床

既然速度要快，还想不备案，那么国内大厂云再适合不过了。查看以下官方的文档，我们可以编写一个自定义的接口来进行对接。这里使用了映画图床的API去上传到J东图床。

const formData = require('form-data');
const vscode = require('vscode');
const path = require('path');
const fs = require('fs');
const got = require('got');
const $l = require('./utils');
module.exports = async function(filePath, savePath) {
        try {
            const form = new formData();
            form.append('name', path.basename(filePath));
            form.append('type', 'file');
            form.append('image', fs.createReadStream(filePath));
            let rsp = await got.post('https://yh-pic.ihcloud.net/api/jd.php', {
                body: form
            });

            return JSON.parse(rsp.body).data.url;
        }
        catch(error) {
            let e = error;
            vscode.window.showInformationMessage(`${$l['upload_failed']}${e.message}`);
            return null;
        }
}