Typora图片自动上传七牛云图床插件整合

? 今年一直使用Typora撰写MarkDown文档，因为又想同时发布到网上，但是由于图片路径都是本地文件路径，直接发布到网上图片就显示不出来，于是想到使用图床。开始是想直接使用自己的腾讯云服务器作为图床，但是一想图片比较多比较大，耗费空间就会浪费银子:joy:。于是就想找一些免费的空间来做图床。先后是了github、gitee，github空间到可以（提供100G）缺点是太慢，经常断掉。gitee空间太小（全部仓库5G，单个才1G）。偶然看见有兄弟说七牛为每个注册用户提供10G免费空间，于是果断注册。进过2两天的捣鼓，现在已经搭建成功。这是我的邀请链接（https://portal.qiniu.com/signup?code=1hgqsryhwradu）,各位觉得有用的兄弟可以点击注册，帮我增加点空间:pray:。接下来介绍七牛云图床和Typora自动上传图片插件整合步骤：

# 一 七牛云图床搭建

1. 通过上面邀请链接，完成账号注册并实名认证。非常简单按提示步骤5分钟操作完成。

2. 注册成功以后，登录后台创建图片存储空间。

==**这一步很关键，配置自己的域名。要不使用它的测试域名，30天过期**==

==**这个域名需要到你的域名管理那块做个CNAME记录，按七牛的操作指导即可**==

经过上面的步骤，七牛云上的免费图床就搭建成功了。

# 二 整合Typora上传插件

此处直接使用大牛开源项目。链接地址：https://github.com/Thobian/typora-plugins-win-img。按照readem.md操作即可。唯一遇到坑的地方是使用大神提供的token生成方法，token始终不对。只好通过官网提供的token生成方法，生成token，然后直接赋值。token生成的java代码如下：

package com.nreg.util;

import com.qiniu.api.auth.digest.Mac;

import com.qiniu.api.config.Config;

import com.qiniu.api.io.IoApi;

import com.qiniu.api.io.PutExtra;

import com.qiniu.api.io.PutRet;

import com.qiniu.api.rs.PutPolicy;

public class Uptoken {

public static void main(String[] args) throws Exception {

Config.ACCESS_KEY = "11111111111111111"; //替换成自己的ak

Config.SECRET_KEY = "11111111111111111"; //替换成自己的sk

Mac mac = new Mac(Config.ACCESS_KEY, Config.SECRET_KEY);

// 请确保该bucket已经存在

String bucketName = "xch-images";

PutPolicy putPolicy = new PutPolicy(bucketName);

putPolicy.expires=225093916800L; //过期时间设置为9102-12-12，要不老得刷新token

String uptoken = putPolicy.token(mac);

System.out.println("======================token=================");

System.out.println(uptoken);

System.out.println("======================token=================");

/*PutExtra extra = new PutExtra();

String key = "111.png";

String localFile = "C:\\Users\\xiechao\\Desktop\\临时图片\\20190704-禅道产品管理流程.png";

PutRet ret = IoApi.putFile(uptoken, key, localFile, extra);

System.out.println("======================上传结果=================");

System.out.println(ret);

System.out.println("======================上传结果=================");*/

}

}

把上面生成的，token直接赋值给upload.js代码，找到如下代码并修改：

qiniu: function(fileData, successCall, failureCall){

var filename = helper.dateFormat((new Date()),'yyyyMMddHHmmss-')+Math.floor(Math.random() * Math.floor(999999))+'.'+helper.extension(fileData);

//var filepath = setting.qiniu.Folder+'/'+filename;

var filepath = filename; //+++++修改此处，七牛云好像没有文件夹的概念，直接生成文件名++++

var policyBase64 = Base64.encode(JSON.stringify(setting.qiniu.policyText));

var bytes = Crypto.HMAC(Crypto.SHA1, policyBase64, setting.qiniu.SecretKey, { asBytes: true }) ;

var encodedSign = Crypto.util.bytesToBase64(bytes);

var uploadToken = setting.qiniu.AccessKey + ':' + encodedSign + ':' + policyBase64;

var fileData = helper.base64ToBlob(fileData);

var formData = new FormData();

formData.append('name', filename);

formData.append('key', filename);

//formData.append('token', uploadToken); //+++++修改此处，直接把上面java生成的token赋值给他++++

formData.append('token', "-T3Idj-qAR4L7omcEvGj5GvxAONh6WiKZf-q70ft:GxwGrYB7j_H9UG2Z096JE8dJG7g=:eyJzY29wZSI6InhjaC1pbWFnZXMiLCJkZWFkbGluZSI6MjI2NjcyODIxMTYwfQ==");

formData.append('file', fileData);

$.ajax({

type: "POST",

url: setting.qiniu.UploadDomain,

processData:false,

data:formData,

contentType: false,

success: function(result) {

console.log(result);

successCall(setting.qiniu.AccessDomain+filepath);

},

error:function(result){

console.log(result);

failureCall('服务响应解析失败，请稍后再试' + result);

}

});

},

通过以上步骤以后，在typora插入图片以后，会自动上传到七牛云图床，并且自动更新了文档中的图片链接地址。如下所示：