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();
                }
            });
        }
    });
});