TinyMCE上传图片后端处理写法

508 字

3 分钟

TinyMCE上传图片后端处理写法

2019-12-10

2026-05-04

博客

nodejs

/

tinymce

/

javascript

开始#

写法有两种，一种是先把图片转换成base64后再本地解析显示，这样可以直接将图片储存在HTML文件中，如果图片过多可能会让HTML文件过大，或者你可以将已经转码成base64的图片上传到服务器后服务器再转码成原jpg或png格式。

另一种是方法是通过POST把图片传输给服务器后，服务器再返回图片地址我们再调用

第一种方法#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>TinyMCE图片上传测试</title>
6
    <script src="tinymce.min.js"></script>
7
    <script type="text/javascript">
8
        tinymce.init({
9
            selector: '#mytextarea',
10
            language: 'zh_CN',
11
            plugins: "image",
12
            toolbar: "image",
13
            images_dataimg_filter: function (img) {
14
                //添加图片渲染到编辑器中
15
                return img.hasAttribute('internal-blob');
16
            },
17
            paste_data_images: true,
18
            images_upload_handler: function (blobInfo, success, failure) {
19
                //将图片转码为base64格式
20
                success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
21
            }
22
        });
23
    </script>
24
</head>
25
<body>
26
    <textarea id="mytextarea"></textarea>
27
</body>
28
</html>

这样所有的图片都会以base64的方式存储在HTML文件中，如果需要上传到服务器中则可以在服务端这样写

1
//NodeJS服务端：
2
app.post('/upload', function (req, res) {
3
    //接收前台POST过来的base64
4
    var imgData = req.body.imgData;
5
    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");     //过滤data:URL
6
    var dataBuffer = new Buffer(base64Data, 'base64');
7
    fs.writeFile("image.png", dataBuffer, function (err) {
8
        if (err) {
9
            res.send(err);
10
        } else {
11
            res.send("保存成功！");
12
        }
13
    });
14
});

第二种方法，先上传再调用#

1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8" />
5
    <title>TinyMCE图片上传测试</title>
6
    <script src="tinymce.min.js"></script>
7
    <script type="text/javascript">
8
        tinymce.init({
9
            selector: '#mytextarea',
10
            language: 'zh_CN',
11
            plugins: "image",
12
            toolbar: "image",
13
            images_upload_base_path: 'dir', //图片存放目录
14
            images_upload_url: '/upload',   //上传地址
15
        });
16
    </script>
17
</head>
18
<body>
19
    <textarea id="mytextarea"></textarea>
20
</body>
21
</html>

后端图片处理

1
var express = require("express");
2
var app = express();
3
var server = require("http").createServer(app);
4
var fs = require('fs');
5
var path = require('path');
6
var formidable = require('formidable');
7

8
app.use(express.static("public"));
9
var port = process.env.PORT || 3000;
10
server.listen(port, function () { console.log("connection") });
11

12
app.post('/upload', function (req, res, next) {
13
    var form = new formidable.IncomingForm();
14
    form.uploadDir = "./public/dir";
15
    form.maxFieldsSize = 4 * 1024 * 1024;  //用户头像大小限制为最大4M
16
    form.keepExtensions = true;        //使用文件的原扩展名
17
    form.parse(req, function (err, fields, file) {
18
        res.send({
19
            location: path.basename(file.file.path) //返回图片地址
20
        });
21
    });
22
});