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

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

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

然后发现了 Atom编辑器的两个插件,使用 7牛 作为图床可以实现： qq截图,然后直接在 Atom 的编辑页面

ctrl+v

粘贴, 弹出上传图片提示，会让你填写一个 title ，点击enter会自动构建一条markdown图片语句。这样上传图片就完成了.

效果如下：



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

第一步, 注册7牛云

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

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

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

相信大家可以搞定的.

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

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

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

如下图:



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

qiniu-uploader 使用报错解决方法

我自己在使用

qiniu-uploader

时Atom提示错误,如下图:



可能你们也会遇到这个问题,

解决方案地址

这里我整理了一下:

先找到 Atom 的配置文件,再找到插件的安装路径. 我的电脑是Windows系统,路径是是这样的 :

C:\Users\Administrator\.atom\packages\qiniu-uploader\node_modules\qiniu\qiniu

替换

\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/