问题描述:服务器系统架构采用的是koa(并非koa2),客户端富文本编辑器采用的是百度的ueditor控件。现在需要ueditor支持将图片直接上传到七牛云。
前提:百度的ueditor需要在本地配置为可用,图片上传相关的配置可以参考官方文档的描述。由于服务器用的node.js,因此ueditor目录下我们只需要保留nodejs目录,其它部分如php,asp.net等都可以删掉。然后根据自己服务器的环境适当修改config.json文件中的配置。
现有方案:现有npm和github上找到的库有很多是基于koa2的,并非koa,所以不适用于本场景。找到一个koa-ueditor的库,但只是将图片上传到服务器硬盘,缺少将图片上传到七牛云,当然我们可以补充这部分代码,毕竟七牛也提供了相应的接口从服务器硬盘将图片进行上传。另外还有一个库oeditor,相对来说比较老了,尝试了一下,并不能正常工作,在debug的过程中发现无法获取到图片文件的数据,原因可能是因为在koa的框架中需要配合使用co-busboy。
解决方案:尝试对koa-ueditor库进行改造,使其支持将图片上传到七牛。
我们将上传的方法封装成一个中间件,代码如下:
"use strict";var Q = require(‘q‘);var path = require("path");var os = require(‘os‘);var snowflake = require(‘node-snowflake‘).Snowflake;var qn = require(‘qn‘);var parse = require(‘co-busboy‘);var Rst = require(‘huanche-models‘).rst;var img_type = ‘.jpg .png .gif .ico .bmp .jpeg‘;var img_path = ‘/ueditor/upload‘;var Config = {};function* ueditor(next){ ???if (this.query.action === ‘config‘) { ???????this.set("Content-Type","json"); ???????this.redirect("/ueditor/nodejs/config.json"); ???} ???else if(this.query.action === ‘uploadimage‘ || this.query.action === ‘uploadfile‘){ ???????if (!Config.qn) { ???????????throw (new Rst()).error(‘缺少qiniu配置‘); ???????} ???????var parts = parse(this); ???????var part; ???????// var stream; ???????var tmp_name; ???????var file_path; ???????var filename; ???????var deferred = Q.defer(); ???????while (part = yield parts) { ???????????if (part.length) { ???????????????// fields are returned as arrays ???????????????var key = part[0]; ???????????????var value = part[1]; ???????????????// check the CSRF token ???????????????//if (key === ‘_csrf‘) this.assertCSRF(value); ???????????} else { ???????????????// files are returned as readable streams ???????????????// let‘s just save them to disk ???????????????if(this.query.action === ‘uploadimage‘ && img_type.indexOf(path.extname(part.filename)) >= 0 ){ ???????????????????var tmpdir = path.join(os.tmpdir(), path.basename(part.filename)); ???????????????????filename = snowflake.nextId() + path.extname(tmpdir); ???????????????????file_path = path.join(img_path, filename); ???????????????????tmp_name = part.filename; ???????????????????qn.create(Config.qn).upload(part, { ???????????????????????key: ‘ueditor/images/‘ + filename ???????????????????}, function (err, results) { ???????????????????????if (err) deferred.reject(err); ???????????????????????deferred.resolve(results); ???????????????????}); ???????????????} ???????????} ???????} ???????var rst = yield deferred.promise.then(function (result) { ???????????// console.log(result); ???????????return result; ???????}); ???????this.body = { ???????????‘url‘: rst.url, ???????????‘title‘: filename, ???????????‘original‘: tmp_name, ???????????‘state‘: ‘SUCCESS‘ ???????}; ???}else{ ???????this.body = { ???????????‘state‘: ‘FAIL‘ ???????}; ???} ???yield next;}module.exports = function(config){ ???if(config){ ???????Config = config; ???} ???return ueditor;};
然后定义图片上传的路由,并指定七牛相关的参数配置。
const router = require(‘koa-router‘)();const ueditor_qiniu = require(‘../../middleware/koa_ueditor_upload_qiniu‘);router.all(‘/ueditor/ue‘, ueditor_qiniu({ ???qn: { ???????accessKey: ‘xxxxxxxxxxx‘, // 七牛的accessKey ???????secretKey: ‘xxxxxxxxxxx‘, // 七牛的secretKey ???????bucket: ‘imgpub‘, // bucket ???????origin: ‘https://xxx.xxxx.com‘ // origin url ???}}));module.exports = router;
注意路由定义中的url部分,这个需要和ueditor目录下的ueditor.config.js文件中所配置的serverUrl参数的值保持一致,否则运行时ueditor将无法正确访问路由。同时我们还需要正确指定七牛上传图片相关的参数,传给中间件的函数。
采用这种方式不需要指定服务器上的图片上传路径,所有上传的图片会直接上传到七牛云,然后返回七牛的图片地址给ueditor控件。
koa-ueditor上传图片到七牛
原文地址:https://www.cnblogs.com/jaxu/p/9202925.html