【nodejs环境配置ueditor文件夹】Nodejs环境配置UEditor文件图片上传的例子

时间:2020-03-10  来源:Action  阅读:

由于UEditor官网没有提供Nodejs版,于是自己尝试进行修改。先根据PHP版查看所有的请求,得到的action参数值包括config(配置文件)、uploadimage(图片上传)、listimage(在线管理)、catchimage(抓取图片),所以只需要重写这4个请求就基本上实现了我们的需求。

1、首先修改UEditor的ueditor.config.js中的serverUrl属性:

serverUrl:"/ue/uploads"

2、将ueditor/php/config.json文件名重置为config.js,并将其移动到ueditor目录下;

3、创建服务端方法/ue/uploads?action=xxxx,直接上代码(注意:上传功能使用了connect-busboy中间件)

/**
 * Created by Satrong on 2014/7/27.
 * UEditor 上传 服务端 控制器
 */
var http = require("http");
var fs = require("fs");
var path = require("path");
var url = require("url");
var uploadsPath = path.resolve("uploads") + "/";//存储图片的路径
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 () {
                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.json(require("/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);
      
    }
};
      
module.exports = {
    "get:/ue/uploads": function (req, res) {
        action[req.query.action](req, res);
    },
    "post:/ue/uploads": function (req, res) {
        action[req.query.action](req, res);
    }
}


以上代码关键部分在action对象中,其余部分可根据自己项目的情况做调整。(服务端没有做上传文件的限制)

【nodejs环境配置ueditor文件夹】Nodejs环境配置UEditor文件图片上传的例子

http://m.bbyears.com/flash/86067.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新