uni-app 在hbuilderX中Markdown写作时图片自动上传图床（可调用picgo）并替换链接

发布于 1周前 作者 yuanlaile 来自 Uni-App

uni-app 在hbuilderX中Markdown写作时图片自动上传图床（可调用picgo）并替换链接

插件需求

使用hbuilderX进行Markdown写作时插入或者粘贴的图片自动上传到图床（可以调用picgo）并替换链接

Harmonyos Next教程
2 回复

公司承接项目外包开发、双端（Android，iOS）原生插件开发。
为什么选择我们： 1、1000 项目开发积累，数百种商业模式开发经验，更懂您的需求，沟通无障碍。 2、一年免费技术保障，系统故障或被攻击，2小时快速响应提供解决方案落地。 3、软件开发源码定制工厂，去中间商降低成本，提高软件开发需求沟通效率。 4、纯原生开发，拒绝模板和封装系统，随时更新迭代，增加功能，无需重做系统。 5、APP定制包办软件著作权申请，30天内保证拿到软著证书，知识产权受保护。 6、中软云科技导入严谨的项目管理系统，确保项目准时交付，快速抢占市场商机。 7、软件开发费、维护费、第三方各种费用公开透明，不花冤枉钱，不玩套路。
已有大量双端插件、App、小程序、公众号、PC、移动端、游戏等案例。
行业开发经验：银行、医疗、直播、电商、教育、旅游、餐饮、分销、微商、物联网、零售等
商务QQ：1559653449 商务微信：fan-rising
7x24小时在线，欢迎咨询了解


在HBuilderX中使用Markdown写作时，要实现图片自动上传至图床（例如使用PicGo）并替换链接的功能，可以通过一些配置和脚本来实现。以下是一个基本的实现思路，并附上相关的代码示例。

1. 安装PicGo

首先，确保你已经安装了PicGo，并且配置好了你的图床。你可以通过npm安装PicGo：

npm install picgo -g

2. 配置PicGo

在PicGo中配置好你的图床，确保可以成功上传图片并获取到图片的URL。

3. 编写脚本

接下来，你需要编写一个脚本来监听Markdown文件的变更，当检测到图片插入时，自动调用PicGo上传图片并替换链接。以下是一个简单的Node.js脚本示例：

const fs = require('fs');
const path = require('path');
const { exec } = require('child_process');
const marked = require('marked');
const picgo = require('picgo');

// 初始化PicGo实例
const pg = new picgo();
pg.loadConfig().then(() => {
  const markdownFilePath = 'path/to/your/markdown/file.md'; // 你的Markdown文件路径

  // 读取Markdown文件内容
  const content = fs.readFileSync(markdownFilePath, 'utf8');

  // 使用marked解析Markdown内容
  const tokens = marked.lexer(content);

  // 遍历tokens，找到图片并上传
  tokens.forEach(token => {
    if (token.type === 'image') {
      const imgSrc = token.href;
      if (imgSrc.startsWith('![') && imgSrc.endsWith(']()')) {
        // 这里提取出图片路径，需要根据你的Markdown格式进行解析
        // 假设图片路径为`![alt](path/to/image.png)`中的`path/to/image.png`
        const imgPathMatch = imgSrc.match(/!\[.*?\]\((.*?)\)/);
        if (imgPathMatch && imgPathMatch[1]) {
          const imgPath = imgPathMatch[1];
          const imgAbsolutePath = path.resolve(__dirname, imgPath);

          // 使用PicGo上传图片
          pg.upload([imgAbsolutePath]).then(result => {
            // 替换Markdown中的图片链接
            const newImgSrc = result[0].url;
            const newContent = content.replace(imgSrc, `![${token.text}](${newImgSrc})`);
            fs.writeFileSync(markdownFilePath, newContent, 'utf8');
            console.log(`图片已上传并替换链接: ${newImgSrc}`);
          }).catch(err => {
            console.error('上传图片失败:', err);
          });
        }
      }
    }
  });
});

4. 运行脚本

将上述脚本保存为uploadImages.js，并通过Node.js运行：

node uploadImages.js

注意事项

  1. 脚本中的markdownFilePath需要替换为你的Markdown文件路径。
  2. 脚本中的图片解析逻辑可能需要根据你的Markdown格式进行调整。
  3. 此脚本仅作为示例，可能需要根据实际情况进行优化和完善。

通过上述步骤，你可以在HBuilderX中编写Markdown时，实现图片自动上传至图床并替换链接的功能。

回到顶部