koa-ueditor上传图片到七牛

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

原文地址:https://www.cnblogs.com/jaxu/p/9202925.html

时间: 2024-11-10 04:48:52

koa-ueditor上传图片到七牛的相关文章

UEditor上传图片到七牛C#(后端实现)

由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1  免费10G 的容量  ,对个人网站足够用 2  规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七牛云 在我看来无非两种方式 1 前端表单或ajax异步提交请求到七牛服务器 ,当然此时也需要经过后端获取相应的  token (图片->七牛服务器) 2 直接后端代码请求 七牛服务器 ,官方有各版本语言的sdk 提供 ,可提高开发效率 ,降低开发难度  (图片->自己服务器->七牛服务器)

UEditor上传图片到七牛云储存(c#)

我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费额度很大,网上评价也挺好的,我就选了七牛 编辑器:我用的是百度的UEditor编辑器,之后需要修改一些的开放的类和js文件 下面写一下c#版本的修改方法(java版本在下一篇) 一.集成UEditor 1.在项目中加入UEditor 在UEditor的下载页,可以下载到最新的1.4.3.3 .Net

ueditor上传图片到七牛云存储(form api,java)

转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 Let's rock 与ueditor结合前的准备工作 首先从表单开始 生成token 建立图片空间 生成token 上传流程 集成ueditor 将ueditor中的图片模块的在线管理功能和七牛结合 ueditor上传图片到七牛云存储 重要说明,本人已不做java多年,请不要加qq再问我java的

关于小程序上传图片到七牛的总结

最近在小程序中做到了头像上传这个功能,本来是挺简单的一个功能,但是这次是让我直接将图片上传到云储存,把返回的路径直接传给后台数据库存起来 emm这就很蛋疼了,一直都是处于你给我接口,我照着要求填数据就行了的那种模式,突然来一个这个操作 而且七牛的官方文档也有点难以理解,反正我是看了一下午,没看懂一堆参数,或者是初始化是怎么配置的 坑是踩的有点多吧,差点心态爆炸了,最后还是依靠的万能的百度解决的 记录一下,算是个总结吧 步骤: 1.  token还是必须要的,调取后台接口,获取到上传图片到七牛的许

onethink 后台编辑器 上传图片使用七牛驱动云存储

首先感谢这篇文章作者: http://blog.csdn.net/weishiyong/article/details/40060551 写的不是很详细,而且没有颜色标示.和我当前使用的OT1.0版本代码又不一样.所以参考参考思路还是可以的. 经过2小时的调试和修改已经成功实现. 下面把过程记录下来. 首先修改全局Config文件:  'PICTURE_UPLOAD_DRIVER'=>'QINIU', //把原来的LOCAL改成七牛 修改七牛配置文件  'UPLOAD_QINIU_CONFIG'

小程序上传图片到七牛

小程序上传图片非常简单,利用好2个API: wx.chooseImage wx.uploadFile /** * 上传图片 */ chooseImageUpload() { var that = this; wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { that.tempFilePaths = r

使用微信 SDK 上传图片到七牛

总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口请求图片的二进制流,然后保存至自己七牛账号内的特定 bucket.大致过程如下: 1.调用微信 chooseImage 接口,成功后调用 uploadImage 接口 wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], s

UEditor+七牛,实现图片直连上传

最近做的项目,涉及到使用富文本编辑器,我选择了百度的UEditor.同时,我们的图片放在七牛云存储上.关于这两者间的集成,我写下一些个人的经验,与大家分享. 图片上传方案 目前来说,Web端基于七牛等云存储的图片上传方式分为以下两种: 1. 上传图片至服务端,再将数据转发至七牛. 通过服务端接受用户上传的内容,同时可以对内容进行有效性审核,拒绝不合规范的内容,然后从服务端将内容上传至七牛. 这种方法可以有效控制并记录用户提交的内容,但同时也增加了服务器的运行压力. 2. 直接上传图片至七牛,然后

简单对七牛.Net API管理文件进行简单封装的类

//封装类代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Qiniu.Conf; using Qiniu.RS; using Qiniu.RPC; using Qiniu.RSF; using Qiniu.IO; using Qiniu.IO.Resumable; using System.IO; using System.Web; using Syste