koa-ueditor上传图片到七牛

Posted 2020-11-19 jaxu

　　问题描述：服务器系统架构采用的是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控件。