summernote上传图片到本地服务器（node.js）

序言

  本文围绕富文本编辑器插件summernote，从html引入、图片上传的jquery配置（包含summernote所有的初始化操作及ajax设置）、nodejs版的后台图片保存等方面介绍了summernote上传图片到本地服务器整个流程，大家有不清楚的地方，请多多提问。

html引入

  summernote是基于bootstrap框架的，故需要先引入bootstrap。代码引入多为本地路径，大家可以根据需要进行更改。

<link href="/css/bootstrap.min.css" rel="stylesheet"><link href="/css/summernote.css" rel="stylesheet"><script type="text/javascript" src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript"src="/js/bootstrap.min.js"></script><!-- 富文本编辑器 --><script type="text/javascript" src="/js/summernote.min.js"></script><script type="text/javascript" src="/js/summernote-zh-CN.js"></script><div id="summernote"></div>

summernote初始化配置

本例只考虑单个图片上传，故只读取fils[0]中的图片文件，若需批量上传，笔者只需改为循环遍历模式即可。

$('#summernote').summernote({        lang: 'zh-CN',        Height: 400,        placeholder: '请输入文本...',        toolbar: [            // [groupName, [list of button]]            ['style', ['bold', 'italic', 'underline', 'clear']],            ['font', ['strikethrough', 'superscript', 'subscript']],            ['fontsize', ['fontname', 'fontsize', 'color']],            ['para', ['ul', 'ol', 'paragraph', 'height']],            ['insert', ['table', 'link', 'picture', 'video']],            ['help', ['help']]        ],        callbacks: {            onImageUpload: function (files) {                var imageData = new FormData();                imageData.append("imageData", files[0]);                $.ajax({                    data: imageData,                    type: "POST",                    url: "/report/uploadImage",                    cache: false,                    contentType: false,                    processData: false,                    success: function (result) {                        if (result.status = "success") {                            var imgNode = document.createElement("img");                            //读取后台返回的图片url                            imgNode.src = result.imageUrl;                            $('#summernote').summernote('insertNode', imgNode);                        }                    },                    error: function () {                        alert("上传图片失败");                    }                });            }        }    });

node.js后端逻辑

1 app.js

var express = require('express');var report = require('./routes/report');app.use(express.static(path.join(__dirname, 'public')));app.use('/report', report);

2 report.js

var express = require('express');var multiparty = require('multiparty');//大文件上传中间件var moment = require('moment');//时间格式化中间件var router = express.Router();router.post('/uploadImage', function (req, res) {    //生成multiparty对象，并配置上传目标路径    var form = new multiparty.Form({uploadDir: 'public/images/reportImages/'});    //上传完成后处理    form.parse(req, function (err, fields, files) {        if (err) {            console.log('parse error: ' + err);        } else {            //注意imageData仍为文件数组类型            var imageFile = (files.imageData)[0];            var uploadedPath = imageFile.path;            //图片名称为上传时间+图片本名            var imageName = moment(Date.now()).format("YYYY年MM月DD日HH时mm分ss秒") + imageFile.originalFilename;            var dstPath = 'public/images/reportImages/' + imageName;            //重命名为真实文件名            fs.rename(uploadedPath, dstPath, function (err) {                if (err) {                    console.log('rename error: ' + err);                } else {                    var result = {};                    result.status = "success";                    result.imageUrl = "/images/reportImages/" + imageName;                    res.status(200).send(result);                    res.end();                }            });        }    });});