您现在的位置是:首页 > 文章详情

Nodejs环境配置UEditor,并实现图片上传阿里OSS

日期:2018-11-29点击:557

UEditor编辑器为百度公司出的一款功能强大的网页在线富文本编辑器,只需简单配置一下就可以使用。

阿里云存储OSS为阿里云推出的一款安全可靠的云存储服务,目前也受到了大部分企业的喜爱。

阿里云存储OSS有着详细的各种语言的API文档让我们使用起来更加得心应手,在这里我们不得不佩服阿里强大的技术力量;相比之下百度的UEditor编辑器的API就显得逊色好多,nodejs作为现在流行的开发语言之一,在他们官网居然找不到相关的图片上传文档。下文我们来给各位介绍在Nodejs环境配置UEditor文件图片上传到阿里OSS的操作方法,希望这个例子能够为大家带来一些帮助。

一、首先引入UEditor的相关文件


<script src="/js/t/ueditor/ueditor.config.js"></script>

<script src="/js/t/ueditor/ueditor.all.js"></script>

<script src="/js/t/ueditor/lang/zh-cn/zh-cn.js"></script>


二、前端配置:新建自己的js文件main.js,并配置自己想要的功能    

   (很多人都直接在UEditor的ueditor.config.js中改config,我个人习惯在插件以外改)

var ue = UE.getEditor('ueditor',{         serverUrl : "/ueditor",      toolbars: ["自定义的工具栏,默认为所有"],         imagePathFormat: "/upload",         elementPathEnabled: false,         maximumWords :20000,         autoHeight: false         })


    这里根据自己的需求去配置,官网有具体的说明,就不再讲解了,要注意一下的是 serverUrl(服务端请求地址,主要用于获取图片上传的一些参数)和 imagePathFormat(指定文件上传路径和返回路径)具体看官方文档


    在编辑器实例化完毕后才可以设置或者获取编辑内容

    ue.ready(function(){         this.setContent("设置内容");                  获取内容         var content = this.getContent();     })




三、后端配置:在服务端创建请求路径 /ueditor 即config中设置的serverUrl参数的请求路径

   在初始化时会get的方式向 serverUrl 发起获取后端配置的请求并带有一个action=config的参数,action参数值包括config(配置文件)、uploadimage(图片上传)、listimage(在线管理)、catchimage(抓取图片),所以只需要重写这4个请求就基本上实现了我们的需求。

  请求处理代码如下

    请求参数     GET {"action": "config"}     POST "upfile": File Data          返回格式     // 需要支持callback参数,返回jsonp格式     {             "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",             "imagePath": "/ueditor/php/",             "imageFieldName": "upfile",             "imageMaxSize": 2048,             "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]         }


到了这里没意外的话刷新页面就会出现你所配置的编辑器了


四、服务端接收前端图片上传数据,并上传到阿里OSS

   到了最重要的一步,这里用到的中间件有(co-busboy,path,ali-oss)

    

   首先要设置ali-oss的相关参数

    var parse = require('co-busboy');     var oss = require('ali-oss')     var part;     var filename;     var buffers = [];     var nread = 0;     var aliyunOss = {};          var bucket = config.bucket,     key = config.key,     domain = config.domain,     dir = config.dir;     var store = oss({         accessKeyId: config.accesskeyid,         accessKeySecret: config.accesskeysecret,         bucket: config.bucket,         region: 'oss-cn-shanghai'     });


   解析接收数据

    var parts = parse(this, {         // only allow upload `.jpg` files         checkFile: function (fieldname, file, filename) {             if(_.indexOf(filterPicture,path.extname(filename))===-1){                 var err = new Error('invalid jpg image')                 err.status = 400                 return err;             }         }     })


   抓取必要信息,并推送到ali-oss

     function random_string(len) {      len = len || 32;      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';         var maxPos = chars.length;      var pwd = '';      for (i = 0; i < len; i++) {          pwd += chars.charAt(Math.floor(Math.random() * maxPos));         }         return pwd;     }          function get_suffix(filename) {         pos = filename.lastIndexOf('.')         suffix = ''         if (pos != -1) {             suffix = filename.substring(pos)         }         return suffix;     }          while (part = yield parts) {         if (part.filename){             filename = part.filename         }         if (filename){             suffix = get_suffix(filename);             o_filename = dir + random_string() + suffix         }         if (part.mimeType) {             ctype = part.mimeType;         };             console.log(part)         if (part._readableState.length) {             csize = part._readableState.length;         };         if(filename){             console.log(o_filename,csize,ctype)             aliyunOss = yield store.put(o_filename, part, {                 headers: {                       'Content-Length': csize,                       'Content-Type': ctype                     }                 });             // console.log(aliyunOss);             console.log('uploading %s -> %s');         }     }


    上传oss完成,按照ueditor认识的格式返回信息

    return {         "state": "SUCCESS",         "url": !!domain?domain+"/"+aliyunOss.name:aliyunOss.url,         "title": aliyunOss.name,         "original": o_filename }



以上代码均为服务端的上传处理代码,需要根据自己的项目情况做调整。


原文链接:https://blog.roncoo.com/article/124808
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章