TinyMCE上传图片后端处理写法

薄荷派

已于 2024-02-08 22:22:59 修改

阅读量3.1k

点赞数 3

分类专栏：日志文章标签： NodeJS TinyMCE

于 2019-12-10 01:26:02 首次发布

本文链接：https://blog.csdn.net/weixin_43825127/article/details/103467885

版权

日志专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

第一种写法具体如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TinyMCE图片上传测试</title>
    <script src="tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: '#mytextarea',
            language: 'zh_CN',
            plugins: "image",
            toolbar: "image",
            images_dataimg_filter: function (img) {
                //添加图片渲染到编辑器中
                return img.hasAttribute('internal-blob');
            },
            paste_data_images: true,
            images_upload_handler: function (blobInfo, success, failure) {
                //将图片转码为base64格式
                success("data:" + blobInfo.blob().type + ";base64," + blobInfo.base64());
            }
        });
    </script>
</head>
<body>
    <textarea id="mytextarea"></textarea>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>TinyMCE图片上传测试</title>
    <script src="tinymce.min.js"></script>
    <script type="text/javascript">
        tinymce.init({
            selector: '#mytextarea',
            language: 'zh_CN',
            plugins: "image",
            toolbar: "image",
            images_upload_base_path: 'dir', //图片存放目录
            images_upload_url: '/upload',   //上传地址
        });
    </script>
</head>
<body>
    <textarea id="mytextarea"></textarea>
</body>
</html>

后端图片处理：

var express = require("express");
var app = express();
var server = require("http").createServer(app);
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');

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

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

这样每次上传新图片的时候服务器的dir文件夹就会收到一张新的图片

薄荷派

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
1
评论
TinyMCE上传图片后端处理写法

写法有两种，一种是先把图片转换成base64后再本地解析显示，这样可以直接将图片储存在HTML文件中，如果图片过多可能会让HTML文件过大，或者你可以将已经转码成base64的图片上传到服务器后服务器再转码成原jpg或png格式。另一种是方法是通过POST把图片传输给服务器后，服务器再返回图片地址我们再调用第一种写法具体如下：<!DOCTYPE html><htm...
复制链接

扫一扫