editor.md七牛云上传图片springboot_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"; //替换成自己的akConfig.SECRET_KEY = "11111111111111111"; //替换成自己的skMac 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，要不老得刷新tokenString 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:甥敳獲xiechaoDesktop临时图片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插入图片以后，会自动上传到七牛云图床，并且自动更新了文档中的图片链接地址。如下所示：