• 0

  • 533

借助Node实现博客素材自动上传

智能的司机

我是老司机

1个月前

相信大家在本地用Markdown写博客的时候都遇到过这个情况:文章写好了,但是图片都是本地的引用路径,不能直接copy到线上博客,需要自行手动上传。

饱受手动上传的痛苦之后,本搬砖工决定写个小脚本解放双手。脚本依赖腾讯云的静态存储,无论用的是哪种静态储存,本质都是一样的,就是运用的API可能有细微的差别。

下面,给大家介绍一下自动上传图片素材的流程:

下文均已此目录结构为基础↓↓

每篇博客都有独立的文件夹,文件夹里面放博客正文以及用到的素材。

① 获取Markdown文件

const fs = require('fs')
const path = require('path')
// 获取指令参数
const args = process.argv
const file = args.pop();
const mdPath = path.join(__dirname, `./${file}`)
const folderPath = mdPath.split('/').slice(0, -1).join('/')
const content = fs.readFileSync(mdPath, { encoding: 'utf-8' })
复制代码

这个阶段主要用到fs、path模块,首先通过process.argv获取指令中的参数,从上述代码可以看出这个脚本默认指令的最后一个传参是Markdown的路径及名称。

由于我每篇博客都有其独立的文件夹,所以需要通过split来获取博客所处文件夹的路径。最后再通过readFile方法来读取Markdown中的具体内容。

然后就该进入解析Markdown的环节了。

② 解析Markdown文件

解析Markdown的插件有不少,我选了之前一直在用的marked,它比较轻便,适合这种小项目使用。

const marked = require('marked')
const html = marked(content)
复制代码

在解析Markdown的过程中,有一个问题困扰着我 -- 该什么时候将图片过滤出来呢?

为此我想了三个方案:

① 通过正则匹配,把img标签以及'![]()'写法的内容匹配出来

② 在解析过程中将图片相关的token过滤出来

其中方案①很轻松就被②打败了,marked的解析确实支持将Markdown解析成一组组token,并输出。

但是在实际使用中发现,img标签的图片写法与Markdown原生的图片写法,解析出来的token并不一致,一个是HTML类型,一个是Paragraph类型,并且Paragraph类型往往伴随着无尽的嵌套。这样处理起来也不是那么的舒服。

那么我们能否像在浏览器一样,通过DOM去识别图片并取出图片的链接呢?

虽然我们是node环境,但是我们确实可以操作DOM。

下面就讲一下最终的实现方案。

③ 利用JSDOM获取图片路径

在网上搜索一下,不难看到jsdom的身影,全世界的前端同学都一样,想在node环境中也能操作一下熟悉的dom。

const jsdom = require('jsdom')
const { JSDOM } = jsdom
const dom = new JSDOM(html)
const document = dom.window.document
const imgList = document.querySelectorAll('img')
复制代码

将我们上一步解析出来的HTML字符串转化成DOM模式,再通过querySelectorAll就能简单便捷的获取文章内所有的图片节点。

随后再对每个图片进行上传操作,即可完成我们的自动上传功能了。

imgList.forEach((img) => {
    const src = img.src || ''
    if (!src || /http|myqcloud/.test(src)) return
    const imgFullSrc = path.join(folderPath, src)
    const imgName = path.basename(imgFullSrc)
    const imgExt = path.extname(imgName)
    const data = fs.readFileSync(imgFullSrc)
    const md5Name = `${CryptoJS.MD5(data.toString('base64'))}${imgExt}`
    promises.push(uploader(md5Name, data, src))
})
复制代码

为了避免图片重复处理,在脚本里简单的加上了路径判断,条件是http以及myqcloud,如果图片的src里面存在这些字样则不会继续处理。

为了避免图片路径重复,脚本将图片的MD5值作为了上传的文件名,另外这样做也方便图片的版本替换,旧素材也不用担心会被覆盖或者丢失。

处理完之后就应该正式进入上传流程了,可以看到imgList每项的处理最后都会向一个promises数组里面push一个uploader方法,这个uploader就是我们的上传主流程。

④ 腾讯云初始化

const COS = require('cos-nodejs-sdk-v5')
const cos = new COS({ SecretId, SecretKey });
复制代码

在谈论上传操作之前,我们得先将腾讯云的sdk初始化好。整个初始化十分简单,只用将我们控制台中查看到的SecretId、SecretKey输入即可完成初始化。

⑤ 图片上传

初始化完sdk之后,通过cos的putObject方法,就可以将图片上传到制定的bucket中。因为图片是批量上传的,所以需要改造一下sdk的putObject方法,将其改为promise的模式,为后续的promise.all调用做准备。

// ......
function uploader(fileName, fileBuffer, oldSrc) {
    return new Promise((resolve) => {
        cos.putObject({
            Bucket,
            Region,
            Key: fileName,
            StorageClass: 'STANDARD',
            Body: fileBuffer,
        }, function(err, data) {
            if (!err && data) {
                resolve({ oldSrc, newSrc: `https://${data.Location}` })
            }
            resolve(null)
        });
    })
}
复制代码

为了图方便,就没有做异常分支的处理了,就算出错了也是按resolve处理,不过可以再后续的回调事件中进行甄别,本文就不多赘述。

上传成功后,腾讯云那边会返回文件的访问路径data.Location,但是这个路径是不带协议的,所以在输出的时候我手动给它加上了协议,并且附上了图片在Markdown内的路径,为下一步替换处理做准备。

Promise.all(promises).then((res) => {
    let newContent = content
    res.forEach((item) => {
        if (item && item.newSrc) {
            newContent = newContent.replace(item.oldSrc, item.newSrc)
        }
    })
    const mdName = path.basename(mdPath).split('.')[0]
    fs.writeFileSync(mdPath.replace(mdName, `${mdName}-${Date.now()}`), newContent)
})
复制代码

批量上传完成之后,将会进入路径替换环节,因为在resolve的时候我将图片的原路径也一并输出了,所以在处理promise的输出时,只需要将oldSrc替换为newSrc即可,随后输出新的Markdown文件。此处亦可覆盖源文件,因为脚本内做了图片路径甄别,所以不用担心重复上传的问题。

小结

至此,一个自动检测博客内容并上传图片的小脚本就完成了,我们只需要输入:

node ./image.js image-script/content.md
复制代码

即可开始上传流程,并且会输出替换图片链接后的Markdown文档。

免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

533

相关文章推荐

未登录头像

暂无评论