TinyMCE上传图片后端处理写法

TinyMCE上传图片后端处理写法

 

写法有两种,一种是先把图片转换成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
    let imgData = req.body.imgData;
    let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");     //过滤data:URL
    let 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>

后端图片处理:

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const fs = require('fs');
const path = require('path');
const formidable = require('formidable');
 
app.use(express.static("public"));
const port = process.env.PORT || 3000;
server.listen(port, function () { console.log(`listening on *:${port}`) });
 
app.post('/upload', function (req, res, next) {
    let 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文件夹就会收到一张新的图片

posted on 2024-04-03 18:13  漫思  阅读(101)  评论(0编辑  收藏  举报

导航