上一篇我们实现了实时预览
功能.
今天这篇要利用免费的七牛云存储服务来实现粘贴自动上传图片
的功能.不想看过程的朋友可以直接下载打包好的程序使用,使用之前记得配置七牛帐号.
文章的内容包含以下三点:
首先在系统设置里增加七牛空间设置
部分,这里就简单的贴上代码,因为系统设置模块之前几篇了都讲过了.
system/model.js
12345678910111213141516171819202122 | ... //默认设置 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
12345678910111213141516171819202122 | ... <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
1 | npm install qiniu --save |
system/model.js
123456789101112 | ... //生成七牛存储空间token 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的时候传入七牛的tokenstudio/directive.js
1234567891011121314151617 | ...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里实现图片上传功能
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 | ...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) { //生成markdown格式的图片地址 var img = '![](http://'+this.bucketHost+'/' + blkRet.key + ')'; //在光标处插入图片 this.cm.doc.replaceSelection(img); }.bind(this)); return false; }},//上传图片,参数为:图片2进制内容,七牛token,文件名,回调函数_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写文章的效率.目前功能还较为简单,不能指定图片名,不能分目录,大家可以根据自己的需求修改代码,完善功能.
接下来的计划:
本篇程序打包,七牛云存储未设置好,请自行根据教程设置.项目地址
新闻热点
疑难解答