Nodejs环境配置UEditor,并实现图片上传阿里OSS
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 }
以上代码均为服务端的上传处理代码,需要根据自己的项目情况做调整。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
关于MySQL配置数据库密码出错和进入数据库时#3167错误问题解决办法
应该有很多人跟我一样在配置MySQL数据库时密码出错, 提示: ”MySQL 服务无法启动,服务没有报告任何错误,请键入NET HELPMSG 3534以获得更多的帮助。” 然后我们可以输入: mysqld --initialize-insecure自动生成无密码的root用户, 再输入mysqld --initialize自动生成带随机密码的root用户。 data文件夹不为空是不能执行这个命令的,然后我们就可以成功配置了。 但是有的人在登陆MySQL提示SQL执行错误#3167,这时候我们就需要进入cmd, 以下转自http://blog.csdn.net/xcmonline/article/details/50441330 --从mysql5.7.6开始information_schema.global_status已经开始被舍弃,为了兼容性,此时需要打开 show_compatibility_56MySQL> select * from information_schema.global_status limit 3;ERROR 3167 (HY000): The 'IN...
- 下一篇
大数据平台网站日志分析系统
1:大数据平台网站日志分析系统,项目技术架构图: 2:大数据平台网站日志分析系统,流程图解析,整体流程如下: ETL即hive查询的sql; 但是,由于本案例的前提是处理海量数据,因而,流程中各环节所使用的技术则跟传统BI完全不同: 1)数据采集:定制开发采集程序,或使用开源框架FLUME 2)数据预处理:定制开发mapreduce程序运行于hadoop集群 3)数据仓库技术:基于hadoop之上的Hive 4)数据导出:基于hadoop的sqoop数据导入导出工具 5)数据可视化:定制开发web程序或使用kettle等产品 6)整个过程的流程调度:hadoop生态圈中的oozie工具或其他类似开源产品 3:在一个完整的大数据处理系统中,除了hdfs+mapreduce+hive组成分析系统的核心之外,还需要数据采集、结果数据导出、任务调度等不可或缺的辅助系统,而这些辅助工具在hadoop生态体系中都有便捷的开源框架,如图所示: 4:采集网站的点击流数据分析项目流程图分析: 5:流式计算一般架构图: 本文链接https://yq.aliyun.com/articles/310549?s...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8