這裏文章都是從我的的github博客直接複製過來的,排版可能有點亂. 原始地址
http://benq.im/2015/04/28/hexomd-05/
上一篇咱們實現了實時預覽
功能.html
今天這篇要利用免費的七牛雲存儲服務來實現粘貼自動上傳圖片
的功能.
不想看過程的朋友能夠直接下載打包好的程序使用,使用以前記得配置七牛賬號.node
文章的內容包含如下三點:git
- 七牛雲存儲.
- clipboard-apis
- ajax文件上傳
七牛雲存儲
系統設置
首先在系統設置裏增長七牛空間設置
部分,這裏就簡單的貼上代碼,由於系統設置模塊以前幾篇了都講過了.github
system/model.jsajax
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
... var defaultSystemData = { lastFile: null, theme:'ambiance', preViewTheme:'github', preViewHighLightTheme:'default',
accessKey:'', secretKey:'', bucketName:'test', bucketHost:'7xit3a.com1.z0.glb.clouddn.com', deadline:1000 }; |
system.htmlnpm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
... <div class="form-group"> <label>AccessKey</label> <input class="form-control" name="accessKey" ng-model="systemSetting.accessKey"/> </div> <div class="form-group"> <label>SecretKey</label> <input class="form-control" name="secretKey" ng-model="systemSetting.secretKey" type="text"/> </div> <div class="form-group"> <label>空間名</label> <input class="form-control" name="bucketName" ng-model="systemSetting.bucketName" type="text"/> </div> <div class="form-group"> <label>空間域名</label> <input class="form-control" name="bucketHost" ng-model="systemSetting.bucketHost" type="text"/> </div> <div class="form-group"> <label>過時時間</label> <input name="deadline" class="form-control" ng-model="systemSetting.deadline" type="number"/> </div> ... |
增長了accesskey
,secretkey
,空間名
,過時時間
四個用於上傳圖片的字段. 其中accesskey
, secretkey
用於驗證權限,空間名
用於指定上傳圖片的存儲空間,過時時間
指定受權的過時時間. 這四個字段共同組成上傳受權的Token
,生成的方法以下:api
安裝七牛nodejs版sdk七牛雲存儲

system/model.jsmarkdown
1 2 3 4 5 6 7 8 9 10 11 12 |
... system.qiniuKeygen = function(systemSetting){ var qiniu = require('../app/node_modules/qiniu'); qiniu.conf.ACCESS_KEY = systemSetting.accessKey; qiniu.conf.SECRET_KEY = systemSetting.secretKey; var putPolicy = new qiniu.rs.PutPolicy(systemSetting.bucketName); putPolicy.expires = Math.round(new Date().getTime() / 1000) + systemSetting.deadline * 3600; systemSetting.qiniutoken = putPolicy.token(); return systemSetting; }; ... |
配置七牛賬號
首先得註冊一個七牛賬號.hexo
進入後臺,新建一個空間,我這裏取的空間名爲blog
,用於我博客的圖片存儲.

選擇新建的空間,點擊空間設置
>域名設置
,查看自動分配的域名

回到後臺首頁,點擊帳號設置
,能夠查看accessKey(AK)
和SecretKey(SK)

在剛作好的後臺裏配置好這幾個字段

我把我空間的密鑰遮住了,你們請填上本身的空間密鑰
圖片上傳
圖片的存儲空間準備好了,如今來實現上傳的功能.
初始化editor的時候傳入七牛的token
studio/directive.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
... studio.directive('hmdEditor', function () { return function ($scope, elem) { var systemData = hmd.system.get(); hmd.editor.init({ el:elem[0], theme:systemData.theme, qiniuToken:hmd.system.qiniuKeygen(systemData).qiniutoken, bucketHost:systemData.bucketHost },systemData.lastFile); hmd.editor.on('setFiled',function(filepath){ hmd.system.setLastFile(filepath); }); ... |
studio/editor裏實現圖片上傳功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
... initQiniu:function(options){ this.qiniuToken = options.qiniuToken; this.bucketHost = options.bucketHost; $('.studio-wrap')[0].onpaste = this.uploadImage.bind(this); }, uploadImage:function(ev){ var clipboardData, items, item; if(!this.qiniuToken){ this.fire('error',{msg:'未設置七牛密鑰,沒法上傳圖片'}); } else if (ev && (clipboardData = ev.clipboardData) && (items = clipboardData.items) && (item = items[0]) && item.kind == 'file' && item.type.match(/^image\//i)) { var blob = item.getAsFile(); var fileName = this.guid() + '.' + blob.type.split('/')[1]; this._qiniuUpload(blob, this.qiniuToken, fileName, function (blkRet) { var img = ''; this.cm.doc.replaceSelection(img); }.bind(this)); return false; } },
_qiniuUpload:function (f, token, key,fn) { var xhr = new XMLHttpRequest(); xhr.open('POST', 'http://up.qiniu.com', true); var formData, startDate; formData = new FormData(); if (key !== null && key !== undefined) formData.append('key', key); formData.append('token', token); formData.append('file', f); var taking;
xhr.onreadystatechange = function (response) { if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText) { var blkRet = JSON.parse(xhr.responseText); fn(blkRet); } else if (xhr.status != 200 && xhr.responseText) { if(xhr.status == 631){ hmd.editor.fire('error',{msg:'七牛空間不存在.'}); } else{ hmd.editor.fire('error',{msg:'七牛設置錯誤.'}); } } }; startDate = new Date().getTime(); xhr.send(formData); } ... |
至此這個功能就完成了,隨便截張圖而後在編輯器裏粘貼,編輯器就會自動生成圖片引用地址:

這個功能較爲簡單,所以今天篇幅較小.
總結
粘貼上傳圖片的功能讓我不用頻繁的停下來上傳圖片,能夠大大的提升用markdown寫文章的效率.
目前功能還較爲簡單,不能指定圖片名,不能分目錄,你們能夠根據本身的需求修改代碼,完善功能.
接下來的計劃:
- 自動更新.
- 雲同步.
- 插件機制
- 表情插件.
附件
本篇程序打包,七牛雲存儲未設置好,請自行根據教程設置.
項目地址