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控件。
koa-ueditor上传图片到七牛的更多相关文章
- UEditor上传图片到七牛C#(后端实现)
由于个人网站空间存储有所以选择将图片统一存储到七牛上,理由很简单 1 免费10G 的容量 ,对个人网站足够用 2 规范的开发者文档 和完善的sdk(几乎所有热门语言sdk) 整体思路 图片上传七 ...
- UEditor上传图片到七牛云储存(java)
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- UEditor上传图片到七牛云储存(c#)
我们的网站一般放在虚拟空间或者服务器上,图片如果存在本地目录,会占用很多空间和流量,还增加了负担,好的办法是把图片存放到云储存服务里面,平时用url去拿 云储存:普遍说又拍云和七牛比较好,看到七牛免费 ...
- ueditor上传图片到七牛云存储(form api,java)
转:http://my.oschina.net/duoduo3369/blog/174655 ueditor上传图片到七牛云存储 ueditor结合七牛传图片 七牛的试炼 开发前的准备与注意事项说明 ...
- axios上传图片(及vue上传图片到七牛))
浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...
- node+express上传图片到七牛
本人微信公众号:前端修炼之路,欢迎关注 最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能.以后如果需要修改成java或者php为后端,直接使用即可, ...
- 使用微信 SDK 上传图片到七牛
总体思路是:在微信下选好图片后将图片上传到微信服务器,在后端使用微信服务器返回的图片 serverId 加上调用接口的 ApiTicket 通过七牛的 fetch 接口向微信服务器下载多媒体文件的接口 ...
- JAVA简单上传图片至七牛
utils package com.example.demo.utils; import com.alibaba.fastjson.JSONObject; import com.qiniu.commo ...
- vue项目中使用element ui上传图片到七牛
1.获取token值 后台有接口调用直接返回token值 //请求后台拿七牛云token async getQiniuToken() { //token let uploadtoken = await ...
随机推荐
- SQLServer之创建链接服务器
创建链接服务器注意事项 当我们要跨本地数据库,访问另外一个数据库表中的数据时,本地数据库中就必须要创建远程数据库的DBLINK,通过DBLINNK数据库可以像访问本地数据库一样访问远程数据库表中的数据 ...
- nn.ConvTranspose2d的参数output_padding的作用
参考:https://blog.csdn.net/qq_41368247/article/details/86626446 使用前提:stride > 1 补充:same卷积操作 是通过padd ...
- 分布式理论 之 CAP 定理
-----------------------------------------------------入巷间吃汤面 笑看窗边飞雪. 目录: 什么是 CAP 定理 为什么只能 3 选 2 能不能解决 ...
- Abp通用配置模块的设计
引言 约定优于配置,配置趋于灵活 约定优于配置(convention over configuration),也称作按约定编程,是一种软件设计范式,旨在减少软件开发人员需做决定的数量,获得简单的好处, ...
- 【XSS】对抗蠕虫 —— 如何让按钮不被 JS 自动点击
前言 XSS 自动点按钮有什么危害? 在社交网络里,很多操作都是通过点击按钮发起的,例如发表留言.假如留言系统有 XSS,用户中招后除了基本攻击外,还能进行传播 -- XSS 自动填入留言内容,并模拟 ...
- ansible基础-安装与配置
一 安装 1.1 ansible架构 ansible是一个非常简单的自动化部署项目,由python编写并且开源.用于提供自动化云配置.配置文件管理.应用部署.服务编排和很多其他的IT自动化需求. an ...
- python进程和线程(六)
协程 协程,又称微线程,纤程.英文名Coroutine.顾名思义,协程是协作式的,也就是非抢占式的程序(线程是抢占式的).协程的关键字是yield,一看到这个就想到了生成器对不对?那就顺便回顾一下生成 ...
- Tomcat的测试网页换成自己项目首页
<Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...
- ubuntu上配置nginx实现反向代理
反向代理 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客 ...
- 新建项目到Jenkins中
在以Jenkins为镜像创建Docker容器时,我们在jenkins的dockerfile文件中写明了要安装Docker Compose,目的也是在Jenkins容器中借助Docker Compose ...