[nodejs]UEditor+nodejs+seaweedfs图片服务器搭建

Wed, 18 May 2016 03:16:01 +0000

1. UEditor + Node.js 图片上传

UEditor是百度开源的富文本编辑器，功能比较强大。
下载地址是：http://ueditor.baidu.com/website/download.html
目前提供：PHP、ASP、.Net、JSP版本。UEditor主要是以前端HTML、CSS、JS为主的，之所以按各种动态语言再细分版本，我的理解是主要是在图片上传这一涉及到与服务器交互的功能上。
在众多版本中，没有提供Node.js的版本，下面将介绍如何用PHP版本的UEditor改造成Node.js版本的UEditor。
咨询查看PHP版本的所有请求，发现action参数值包括config（配置文件）、uploadimage（图片上传）、listimage（在线管理）、catchimage（抓取图片），所以只需要重写这4个请求就基本上实现了我们的需求。

1.1 修改UEditor的`ueditor.config.js`的`serverUrl`属性：

1

serverUrl: '/ue/uploads'

1.2 将`ueditor/php/config.json`文件名修改为`config.js`并移动到`ueditor`目录下。

1.3 接下来主要在Node.js端编写对应的四个action就好，图片上传使用了`connect-busboy`中间件。代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104


// 图片上传
var path = require('path');
var uploadsPath = path.resolve('public/uploads') + '/'; // 存储图片的路径
var busboy = require('connect-busboy');
app.use(busboy({
 limits: {
 fileSize: 10 * 1024 * 1024 // 10MB
 }
}));
var action = {
 // 上传图片
 uploadimage: function (req, res) {
 var fstream;
 req.pipe(req.busboy);
 req.busboy.on('file', function (fieldname, file, filename, encoding, mimetype) {
 var filesize = 0;
 var ext = path.extname(filename);
 var newFilename = (new Date() - 0) + ext;
 fstream = fs.createWriteStream(uploadsPath + newFilename);
 file.on('data', function (data) {
 filesize = data.length;
 });
 fstream.on('close', function () {
 console.log(JSON.stringify({
 "originalName": filename,
 "name": newFilename,
 "url": '/uploads/' + newFilename,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 }));
 res.send(JSON.stringify({
 "originalName": filename,
 "name": newFilename,
 "url": '/uploads/' + newFilename,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 }));
 });
 file.pipe(fstream);
 });
 },
 // 获取配置文件
 config: function (req, res) {
 return res.redirect('/js/UEditor/config.js');
 },
 // 在线管理
 listimage: function (req, res) {
 fs.readdir(uploadsPath, function (err, files) {
 var total = 0, list = [];
 files.sort().splice(req.query.start, req.query.size).forEach(function (a, b) {
 /^.+\..+$/.test(a) &&
 list.push({
 url: '/uploads/' + a,
 mtime: new Date(fs.statSync(uploadsPath + a).mtime).getTime()
 });
 });
 total = list.length;
 res.json({state: total === 0 ? 'no match file' : 'SUCCESS', list: list, total: total, start: req.query.start});
 });
 },
 // 抓取图片（粘贴时将图片保存到服务端）
 catchimage: function (req, res) {
 var list = [];
 req.body.source.forEach(function (src, index) {
 http.get(src, function (_res) {
 var imagedata = '';
 _res.setEncoding('binary');
 _res.on('data', function (chunk) {
 imagedata += chunk
 });
 _res.on('end', function () {
 var pathname = url.parse(src).pathname;
 var original = pathname.match(/[^/]+\.\w+$/g)[0];
 var suffix = original.match(/[^\.]+$/)[0];
 var filename = Date.now() + '.' + suffix;
 var filepath = uploadsPath + 'catchimages/' + filename;
 fs.writeFile(filepath, imagedata, 'binary', function (err) {
 list.push({
 original: original,
 source: src,
 state: err ? "ERROR" : "SUCCESS",
 title: filename,
 url: '/uploads/catchimages/' + filename
 });
 })
 });
 })
 });
 var f = setInterval(function () {
 if (req.body.source.length === list.length) {
 clearInterval(f);
 res.json({state: "SUCCESS", list: list});
 }
 }, 50);
 }
};
app.get('/ue/uploads', function (req, res) {
 action[req.query.action](req, res);
});
app.post('/ue/uploads', function (req, res) {
 action[req.query.action](req, res);
});

以上主要参考了博客：http://www.xiaoboy.com/detail/1341545081.html

2. GoLang的安装与配置

1中UEditor的图片上传到Node.js服务器中的/public/uploads/文件夹中，如果需要高存储、可移植、可扩展等特性的图片服务器，则需要配置专门的服务器。本文选用的是开源的图片（文件）分布式服务器seaweedfs。
Github地址：https://github.com/chrislusf/seaweedfs
该服务器使用GoLang编写，所以需要安装配置GoLang。中国的下载地址：http://www.golangtc.com/download，根据自己的操作系统选择特定的包下载即可。本文演示的Windows 7 x64下载安装。傻瓜式安装好之后，需要配置一下环境变量：

1
2
3


GOROOT=D:\Go16
GOPATH=D:\ImageServer\seaweedfs
PATH=D:\Go16\bin

GOPATH环境变量，这个变量很重要，我自己写的代码要放到这个变量中配置的目录中，go编译器才会找到并编译。

3. seaweedfs的编译运行

Github上把seaweedfs的代码clone下来，然后安装makefile中的执行也可以直接makefile。在seaweedfs中执行控制台：

1
2
3
4
5
6


go clean -i -v ./go/weed/

rm –f weed #for linux

go get -v –d ./go/weed
go build -v -o weed ./go/weed

其中在get依赖的时候有可能有些依赖包不能下载，需要自己手动下载，放入：\seaweedfs\src目录中。
推荐一个go下载包地址：https://gopm.io/download?pkgname=golang.org/x/net
Build之后会在seaweedfs中生成一个weed，也可以将其改名为weed.exe。这个时候就可以启动weed。以本机为演示：

1

weed master

1

weed volume --dir="./tmp/data1" --max=5 --mserver="localhost:9333" --port=8080 &

按照github的描述上传、下载图片都没有问题。至此基本的图片服务器搭建完成。

修改Node.js的图片上传代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113


// 图片上传
var path = require('path');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();
function curlPostAssign(res, filepath, filename, filesize) {
 request.post(config.url_image + 'dir/assign',{},
 function (error, response, body) {
 if (!error && response.statusCode == 200) {
 assign = eval('(' + body + ')');
 var result = {};
 result.res = res;
 result.json = JSON.stringify({
 "originalName": filename,
 "name": assign.fid,
 "url": '/res?fid=' + assign.fid,
 "type": ext,
 "size": filesize,
 "state": "SUCCESS"
 });
 curlPostWrite(assign.fid, filepath, assign.publicUrl, result);
 var ext = path.extname(filename);
 } else {
 console.log("Image server assign error...")
 }
 });
}
function curlPostWrite(fid, tmp_file, publicUrl, result) {
 var files = [
 {urlKey: "file1", urlValue: tmp_file}
 ]
 var options = {
 host: publicUrl.split(":")[0],
 port: publicUrl.split(":")[1],
 method: "POST",
 path: "/" + fid
 }
 var req = http.request(options, function(res){
 res.on("data", function(chunk){
 })
 })

 req.on('error', function(e){
 console.log('problem with request:' + e.message);
 console.log(e);
 })
 postfile.postFile(files, req, result);
}
var action = {
 // 上传图片
 uploadimage: function(req, res) {
 curlPostAssign(res, req.files.upfile.path, req.files.upfile.originalFilename, req.files.upfile.size);
 },
 // 获取配置文件
 config: function (req, res) {
 return res.redirect('/js/UEditor/config.js');
 },
 // 在线管理
 listimage: function (req, res) {
 fs.readdir(uploadsPath, function (err, files) {
 var total = 0, list = [];
 files.sort().splice(req.query.start, req.query.size).forEach(function (a, b) {
 /^.+\..+$/.test(a) &&
 list.push({
 url: '/uploads/' + a,
 mtime: new Date(fs.statSync(uploadsPath + a).mtime).getTime()
 });
 });
 total = list.length;
 res.json({state: total === 0 ? 'no match file' : 'SUCCESS', list: list, total: total, start: req.query.start});
 });
 },
 // 抓取图片（粘贴时将图片保存到服务端）
 catchimage: function (req, res) {
 var list = [];
 req.body.source.forEach(function (src, index) {
 http.get(src, function (_res) {
 var imagedata = '';
 _res.setEncoding('binary');
 _res.on('data', function (chunk) {
 imagedata += chunk
 });
 _res.on('end', function () {
 var pathname = url.parse(src).pathname;
 var original = pathname.match(/[^/]+\.\w+$/g)[0];
 var suffix = original.match(/[^\.]+$/)[0];
 var filename = Date.now() + '.' + suffix;
 var filepath = uploadsPath + 'catchimages/' + filename;
 fs.writeFile(filepath, imagedata, 'binary', function (err) {
 list.push({
 original: original,
 source: src,
 state: err ? "ERROR" : "SUCCESS",
 title: filename,
 url: '/uploads/catchimages/' + filename
 });
 })
 });
 })
 });
 var f = setInterval(function () {
 if (req.body.source.length === list.length) {
 clearInterval(f);
 res.json({state: "SUCCESS", list: list});
 }
 }, 50);
 }
};
app.get('/ue/uploads', multipartMiddleware, function (req, res) {
 action[req.query.action](req, res);
});
app.post('/ue/uploads', multipartMiddleware, function (req, res) {
 action[req.query.action](req, res);
});

运行效果：

[nodejs]nodejs express异常捕获

Thu, 10 Mar 2016 09:30:18 +0000

由于 Node.js 是非阻塞单进程单线程的，一旦 Node.js 抛出异常，整个服务就会停掉，服务将会非常不稳定。解决方法：

使程序鲁棒：在有可能出现异常的地方，全部使用 try { } catch(){ } 进行嵌套。
Express 的错误捕获机制：作为 Node.js 比较常用的框架，其实 Node.js 自己也有一定的异常错误捕获机制。

1
2
3
4
5
6


// Express' errorHandler
function errorHandler(err, req, res, next) {
 console.error(err.stack);
 res.status(500).send('Something broke!');
}
app.use(errorHandler);

使用 domain 模块：先下载 domain 模块，npm install domain

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// Domain 捕获异常
const domain = require('domain');

app.use(function(req, res, next) {
 var reqDomain = domain.create();
 reqDomain.on('error', function(err) {
 console.log(err.stack);
 res.statusCode = 500;
 res.end(err.message + '\n');
 reqDomain.dispose();
 });
 reqDomain.add(req);
 reqDomain.add(res);
 reqDomain.run(next);
});

使用 forever 启动 app.js：forever 可以看做是一个 Node.js 的守护进程，能够启动、停止、重启我们的 app 应用。

1

forever start app.js

通过这些方法，可以提高 Node.js 服务的稳定性，防止因未捕获的异常导致整个服务崩溃。

Nodejs on Coinidea的博客