Atom 编写 Markdown 一键上传图片,使用7牛云图床

最新推荐文章于 2024-06-28 13:07:06 发布
最新推荐文章于 2024-06-28 13:07:06 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： 工作生活 文章标签： atom github markdown 图片 七牛云
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ShunXiangL/article/details/75944126
版权

因为对markdown比较感兴趣,平时的文档编写都是用markdown来完成.以前是用csdn的博客编辑器,支持图片上传,预览. 最近在公司的文档也开始用markdown来写了,就会遇到一个问题：如何上传图片？

最开始我不知道图床啥的,就是自己先把图片上传到 github ,然后再手动引用连接到文章中,这样的也能实现markdown的图片引用. 但是不够优雅,而且很麻烦.上传一张图片有4到5步操作.

然后发现了 Atom编辑器的两个插件,使用 7牛 作为图床可以实现： qq截图,然后直接在 Atom 的编辑页面 ctrl+v 粘贴, 弹出上传图片提示，会让你填写一个 title ，点击enter会自动构建一条markdown图片语句。这样上传图片就完成了.

效果如下：
七牛云图床,一键上传图片

这个就是我一键上传的图片,是不是很简单! 下面我就给大家介绍实现的方法:

第一步, 注册7牛云

7牛云的注册,新建空间就不过多介绍了.

吴同学博客: 使用七牛作为github博客的图床

佚名大神博客: 如何使用七牛

相信大家可以搞定的.

第二步, 下载 markdown-assistant,qiniu-uploader 插件

chajian

安装好插件后还需要对它们进行设置:

设置markdown-assistant的时候发现，会让你填一个上传插件，而且默认已经帮你填好了qiniu-uploader，其实你也就什么都不用设置了。

如下图:

markdown-assistant

设置qiniu-uploader，主要设置四个参数：

qiniu-uploader

qiniu-uploader 使用报错解决方法

我自己在使用 qiniu-uploader 时Atom提示错误,如下图:

qiniu-error

可能你们也会遇到这个问题,
解决方案地址

这里我整理了一下:

  1. 先找到 Atom 的配置文件,再找到插件的安装路径. 我的电脑是Windows系统,路径是是这样的 : C:\Users\Administrator\.atom\packages\qiniu-uploader\node_modules\qiniu\qiniu

  2. 替换 \qiniu 文件夹下面: io.js,rpc.js,zone.js, 然后就ok了

这里我贴出来:

os.js

var conf = require('./conf');
var util = require('./util');
var rpc = require('./rpc');
var fs = require('fs');
var getCrc32 = require('crc32');
var url = require('url');
var mime = require('mime');
var Readable = require('stream').Readable;
var formstream = require('formstream');
var urllib = require('urllib');
var zone = require('./zone');

exports.UNDEFINED_KEY = '?'
exports.PutExtra = PutExtra;
exports.PutRet = PutRet;
exports.put = put;
exports.putWithoutKey = putWithoutKey;
exports.putFile = putFile;
exports.putReadable = putReadable;
exports.putFileWithoutKey = putFileWithoutKey;

// @gist PutExtra
function PutExtra(params, mimeType, crc32, checkCrc) {
  this.params = params || {};
  this.mimeType = mimeType || null;
  this.crc32 = crc32 || null;
  this.checkCrc = checkCrc || 0;
}
// @endgist

function PutRet(hash, key) {
  this.hash = hash || null;
  this.key = key || null;
}

// onret: callback function instead of ret
function putReadable (uptoken, key, rs, extra, onret) {
  if (!extra) {
    extra = new PutExtra();
  }
  if (!extra.mimeType) {
    extra.mimeType = 'application/octet-stream';
  }

  if (!key) {
    key = exports.UNDEFINED_KEY;
  }

  rs.on("error", function (err) {
      onret({code: -1, error: err.toString()}, {});
  });


  // 设置上传域名
  // zone.up_host(uptoken, conf);
  zone.up_host_async(uptoken, conf, function() {
      var form = getMultipart(uptoken, key, rs, extra);
      return rpc.postMultipart(conf.UP_HOST, form, onret);
  });

}


function put(uptoken, key, body, extra, onret) {
  var rs = new Readable();
  rs.push(body);
  rs.push(null);

  if (!extra) {
    extra = new PutExtra();
  }
  if (extra.checkCrc == 1) {
    var bodyCrc32 = getCrc32(body);
    extra.crc32 = '' + parseInt(bodyCrc32, 16);
  } else if (extra.checkCrc == 2 && extra.crc32) {
    extra.crc32 = '' + extra.crc32
  }
  return putReadable(uptoken, key, rs, extra, onret)
}

function putWithoutKey(uptoken, body, extra, onret) {
  return put(uptoken, null, body, extra, onret);
}

function getMultipart(uptoken, key, rs, extra) {

  var form = formstream();

  form.field('token', uptoken);
  if (key != exports.UNDEFINED_KEY) {
    form.field('key', key);
  }
  form.stream('file', rs, key, extra.mimeType);

  if (extra.crc32) {
    form.field('crc32', extra.crc32);
  }

  for (var k in extra.params) {
    form.field(k, extra.params[k]);
  }

  return form;
}

function putFile(uptoken, key, loadFile, extra, onret) {

  var rs = fs.createReadStream(loadFile);

  if (!extra) {
    extra = new PutExtra();
  }
  if (extra.checkCrc == 1) {
    var fileCrc32 = getCrc32(fs.readFileSync(loadFile));
    extra.crc32 = '' + parseInt(fileCrc32, 16);
  } else if (extra.checkCrc == 2 && extra.crc32) {
    extra.crc32 = '' + extra.crc32
  }
  if (!extra.mimeType) {
    extra.mimeType = mime.lookup(loadFile);
  }

  return putReadable(uptoken, key, rs, extra, onret);
}

function putFileWithoutKey(uptoken, loadFile, extra, onret) {
  return putFile(uptoken, null, loadFile, extra, onret);
}

rpc.js

var urllib = require('urllib');
var util = require('./util');
var conf = require('./conf');

exports.postMultipart = postMultipart;
exports.postWithForm = postWithForm;
exports.postWithoutForm = postWithoutForm;

function postMultipart(uri, form, onret) {
  return post(uri, form, form.headers(), onret);
}

function postWithForm(uri, form, token, onret) {
  var headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
  };
  if (token) {
    headers['Authorization'] = token;
  }
  return post(uri, form, headers, onret);
}

function postWithoutForm(uri, token, onret) {
  var headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };
  if (token) {
    headers['Authorization'] = token;
  }
  return post(uri, null, headers, onret);
}

function post(uri, form, headers, onresp) {
  headers = headers || {};
  headers['User-Agent'] = headers['User-Agent'] || conf.USER_AGENT;


  var data = {
    headers: headers,
    method: 'POST',
    dataType: 'json',
    timeout: conf.RPC_TIMEOUT,
  };
  if (Buffer.isBuffer(form) || typeof form === 'string') {
    data.content = form;
  } else if (form) {
    data.stream = form;
  } else {
    data.headers['Content-Length'] = 0;
  };

  var req = urllib.request(uri, data, function(err, result, res) {
    var rerr = null;
    if (err || Math.floor(res.statusCode/100) !== 2) {
      rerr = {code: res&&res.statusCode||-1, error: err||result&&result.error||''};
    }
    onresp(rerr, result, res);
  });

  return req;
}

zone.js

// var request = require('urllib-sync').request;
var urllib = require('urllib');
var util = require('./util');
//conf 为全局变量
exports.up_host = function (uptoken, conf){

    var version = process.versions;
    var num = version.node.split(".")[0];

    // node 版本号低于 1.0.0, 使用默认域名上传，可以在conf中指定上传域名
    if(num < 1 ){
        conf.AUTOZONE = false;
    }

    if(!conf.AUTOZONE){
        return;
    }

    var ak = uptoken.toString().split(":")[0];
    var tokenPolicy = uptoken.toString().split(":")[2];
    var tokenPolicyStr = new Buffer(tokenPolicy, 'base64').toString();
    var json_tokenPolicyStr = JSON.parse(tokenPolicyStr);

    var scope = json_tokenPolicyStr.scope;
    var bucket = scope.toString().split(":")[0];

    // bucket 相同，上传域名仍在过期时间内
    if((new Date().getTime() < conf.EXPIRE) && bucket == conf.BUCKET){
        return;
    }

    //记录bucket名
    conf.BUCKET = bucket;

    var request_url = 'http://uc.qbox.me/v1/query?ak='+ ak + '&bucket=' + bucket;

    var res = request('http://uc.qbox.me/v1/query?ak='+ ak + '&bucket=' + bucket, {
      'headers': {
        'Content-Type': 'application/json'
      }
    });

    if(res.statusCode == 200){

        var json_str = JSON.parse(res.body.toString());

        //判断设置使用的协议, 默认使用http
        if(conf.SCHEME == 'http'){
            conf.UP_HOST = json_str.http.up[1];
        }else{
            conf.UP_HOST = json_str.https.up[0];
        }

        conf.EXPIRE = 86400 + new Date().getTime();

    }else{
        var err = new Error('Server responded with status code ' + res.statusCode + ':\n' + res.body.toString());
        err.statusCode = res.statusCode;
        err.headers = res.headers;
        err.body = res.body;
        throw err;
    }



}



exports.up_host_async = function (uptoken, conf, callback){

    var version = process.versions;
    var num = version.node.split(".")[0];

    // node 版本号低于 1.0.0, 使用默认域名上传，可以在conf中指定上传域名
    if(num < 1 ){
        conf.AUTOZONE = false;
    }

    if(!conf.AUTOZONE){
        callback();
        return;
    }

    var ak = uptoken.toString().split(":")[0];
    var tokenPolicy = uptoken.toString().split(":")[2];
    var tokenPolicyStr = new Buffer(tokenPolicy, 'base64').toString();
    var json_tokenPolicyStr = JSON.parse(tokenPolicyStr);

    var scope = json_tokenPolicyStr.scope;
    var bucket = scope.toString().split(":")[0];

    // bucket 相同，上传域名仍在过期时间内
    if((new Date().getTime() < conf.EXPIRE) && bucket == conf.BUCKET){
        callback();
        return;
    }

    //记录bucket名
    conf.BUCKET = bucket;
    var request_url = 'http://uc.qbox.me/v1/query?ak='+ ak + '&bucket=' + bucket;
    var data = {
      contentType: 'application/json',
      method: 'GET',
    };


    var req = urllib.request(request_url, data, function(err, result, res) {
      // console.log(result);
      if(res.statusCode == 200){
          // console.log(result);
          var json_str = JSON.parse(result.toString());
          // console.log(json_str);
          //判断设置使用的协议, 默认使用http
          if(conf.SCHEME == 'http'){
              conf.UP_HOST = json_str.http.up[1];
          }else{
              conf.UP_HOST = json_str.https.up[0];
          }

          conf.EXPIRE = 86400 + new Date().getTime();
          callback();
          return;
      }else{
          var err = new Error('Server responded with status code ' + res.statusCode + ':\n' + res.body.toString());
          err.statusCode = res.statusCode;
          err.headers = res.headers;
          err.body = res.body;
          throw err;
          callback();
      }
    });

    return;


}

本文地址 https://marishunxiang.github.io/

ShunxiangL
关注
专栏目录
qimage-mac：Mac版本的Markdown一键贴图工具，基于Alfred实现，支持本地文件，截图，网络图片一键上传七牛云，使用简单方便
02-04
七牛云提供了稳定且高效的图片托管服务，上传后的图片链接可以长期有效，确保Markdown文档中的图片不会因本地文件丢失而失效。 **6. Qshell 和 MarkdownAppleScript：** Qshell是七牛云提供的命令行工具，用于管理...
Python中解决中文解码编码问题
u013155359的博客
12-04 9387
问题：b_msg":"\u8bf7\u5148\u767b\u5f55，运行时，产生非中文，需要通过转码来解决。 对内容进行解码：decode('unicode_escape')
七牛云 + Typora + PicGo 搭建图床
Chimengmeng的博客
09-05 827
【一】使用七牛云托管 【1】注册七牛云账号： 首先，您需要访问七牛云官方网站并注册一个账号。提供必要的信息完成注册流程后，您将获得一个七牛云账号。 官网 https://www.qiniu.com/?cps_key=1hk4r1ha80spe 【2】选择文件存储服务 - Kodo： 登录后，在七牛云控制台中，选择文件存储服务，即 Kodo。Kodo 是七牛云提供的对象存储服务，可用...
004Typora配置七牛云图床
最新发布
wfr_168的博客
06-28 1307
Typora配置七牛云图床
七牛云图床 + PicGo图床
qq_45931842的博客
08-09 4434
一、概述 最近在做一个个人博客项目，发现博客中会插入很多图片，怎么存储成了问题，经过一番查询发现大家都是用的图床工具，之前了解过七牛云，注册认证后有10G永久免费空间，每月10G国内和10G国外流量，速度相当快，七牛云是国内专业CDN服务商，插件支持比较多，有免费ssl证书，但https流量收费，所以便想用七牛云进行图片的存储，打算以后的文章图片都使用七牛云来进行存储，不过要注意的一点是，七牛云30天后会回收测试域名，因此你必须要绑定自己的已备案的域名。我将采用Typora作为Markdown编辑器，Pi
基于Typora和七牛云配置文章图床
Hi，我是sharkchili，CSDN Java领域博客专家，开源项目JavaGuide维护人员，我想写一些有意思的东西，希望对你有帮助。
03-18 2033
前段时间csdn做了一次改变，使得图片防盗链导致笔者网站的文章图片变成这样子。查阅网上的方案经过比对发现七牛云有免费的额度，所以最终选择七牛云作为图床，所以借着这篇文章来记录一下部署图床部署过程。有个人服务器，且网站部署在个人服务器上。文章是用Typora编写。有HTTPS证书。上面的方式配置域名是需要收费的，所以为了节约成本的读者建议配置HTTPS域名时采取自定义源站域名，配置方式也很简单。在七牛云管理页面点击空间管理选择绑定域名。
Gitee结合七牛云制作图床
开心的博客
04-01 768
当在撰写MarkDown博客时，一顿CV上去却发现CSDN的防盗链让图片失效。这时候，一个优秀的图床服务就能为你的博客提供帮助。
一键上传图床软件PicGo2.1.2
01-13
用于一键上传图片至图床，所谓图床工具，就是自动把本地图片转换成链接的一款工具，网络上有很多图床工具，就目前使用种类而言，PicGo 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持...
qimage-win：Windows版本Markdown一键贴图工具，支持本地文件，截图，网络图片一键上传七牛云并返回图片引用，让Markdown中贴图变成一种享受
02-04
该工具集成了本地文件选择、屏幕截图以及网络图片上传等功能，可以一键将图片上传到七牛云，并自动生成Markdown所需的图片引用代码，从而让用户可以快速地在Markdown文档中插入图片。 七牛云是一家提供云存储和CDN...
atom-markdown-table-editor：Atom的Markdown表编辑器
02-04
将编辑器的语法设置为GitHub Markdown或Markdown 。 输入管道| 和一些内容（光标位置由_表示）。 | foo_ （如果您正在使用 ，请不要忘记在管道后面留一个空格。） 点击选项卡移动到下一个单元格。 | foo | _ | ---...
PHP实现Markdown文章上传到七牛图床的实例内容
10-15
在本实例中，使用的图床服务是七牛云，它提供图片存储、图片管理以及图片的外链获取等功能。通过上传图片到图床服务，可以获得一个网络地址，将这个地址嵌入到Markdown文章中，以实现图片的在线显示。 ### 知识点三...
Typora+PicGo+七牛云图床
u010075995的博客
06-27 426
像我平常写博客的话，基本很少使用博客系统自带的编辑器，因为网页端很难达到客户端那样的流畅，偶尔还会出现网络问题，造成辛辛苦苦写完的内容丢失，而在客户端则不会出现这种问题。但客户端的问题在于该怎么上传图片，不然博客写完，图片还要一张张的上传，那岂不是得不偿失。所以在这里介绍七牛云搭建图床的方法。
七牛云图床设置
编程SHARE的博客
05-24 1351
原文链接。
搭建七牛云图床并配置https
u014246801的博客
03-23 1377
搜了一圈，发现七牛云图床比较好，每个月有10g的免费存储空间和10g的下载流量，但是需要域名绑定。点击绑定域名进行绑定，输入一个二级域名，比如我买的域名是mundane.ink，输入的二级域名我就填了一个cdn.mundane.ink，其他的填默认即可。4、存储区域：七牛云的存储区域（华东 z0，华北 z1，华南 z2，北美 na0，东南亚 as0 ），根据你空间所在的区域，填对应的代码。因为我之前买了阿里云的服务器，所以这里买的也是阿里云的域名。具体我是参考的这篇，就不详细讲了。解压后可以看到三个文件。
七牛云图床的使用
qq_46334333的博客
08-18 1052
1.七牛云网站的网址：https://www.qiniu.com/ 2.教程：https://jingyan.baidu.com/article/fd8044fac2a7df5031137aad.html 3.七牛云图床的使用： 1）.进入对象储存： 2）.进入空间管理： 3）.点击文件管理，上传文件： 4）.选择上传的文件： ...
picGo设置免费图床之七牛云
yuanshuaiwuji的博客
07-28 411
图床一般是指储存图片的服务器。当我们需要把本地的图片能够在互联网上访问的时候，此时我们就要把自己本地的图片存储在服务器，这个时候图床就派上用场了。
七牛云 + Picgo实现图床
weixin_45614886的博客
09-23 937
利用七牛云的存储空间 + 腾讯云域名 + PicGo 实现图床的搭建
七牛云图床搭建教程
qq_29086527的博客
06-08 7278
首先，我们需要访问七牛云的官网，注册并登录账号。 然后在七牛云的控制台中找到对象存储，新建存储空间 存储空间建好后，七牛官方会免费赠送一个为期30天的测试域名。注意，30天到期后，存储的照片全部作废，这是血与泪的教训。这里，建议大家直接绑定自己已经备案过的域名。 在自定义CDN域名下，开始绑定自己的域名 绑定的域名如下所示： 接下来开始配置CNAME解析 我的域名是在阿里云买的，所以我需要登录阿里云控制台，为域名添加一条CNAME协议。 点击确认，返回七牛云的域名管理，当发现CNAME为绿色
七牛云个人图床搭建+PicGo+Typora
Coin_Collecter的博客
03-26 697
通过七牛云和PicGo实现Typora个人图床搭建。在使用Typora时添加完本地图片后不能删除本地图片，否则Typora中就无法显示了，这简直比Word还不方便，后来发现可以通过图床的方式把图片上传到云存储中解决上述问题。因此本文讲述的是如何通过七牛云和PicGo实现Typora个人图床搭建。
Typora使用PicGo-Core自动上传图片到GitHub图床教程
"使用Typora自动上传图片到GitHub图床的教程" 在数字化内容创作中，图片的使用不可或缺，而如何方便地管理和上传图片是许多博主和作者关心的问题。 Typora是一款流行的Markdown编辑器，以其简洁的界面和良好的用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值