這里文章都是從個人的github博客直接復制過來的,排版可能有點亂. 原始地址
http://benq.im/2015/04/28/hexomd-05/
上一篇我們實現了實時預覽功能.
今天這篇要利用免費的七牛雲存儲服務來實現粘貼自動上傳圖片的功能.
不想看過程的朋友可以直接下載打包好的程序使用,使用之前記得配置七牛帳號.
文章的內容包含以下三點:
- 七牛雲存儲.
- clipboard-apis
- ajax文件上傳
七牛雲存儲
系統設置
首先在系統設置里增加七牛空間設置部分,這里就簡單的貼上代碼,因為系統設置模塊之前幾篇了都講過了.
system/model.js
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.html
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,生成的方法如下:
安裝七牛nodejs版sdk
system/model.js
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;
};
... |
配置七牛帳號
首先得注冊一個七牛帳號.
進入后台,新建一個空間,我這里取的空間名為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寫文章的效率.
目前功能還較為簡單,不能指定圖片名,不能分目錄,大家可以根據自己的需求修改代碼,完善功能.
接下來的計划:
- 自動更新.
- 雲同步.
- 插件機制
- 表情插件.
附件
本篇程序打包,七牛雲存儲未設置好,請自行根據教程設置.
項目地址
