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文件夹就会收到一张新的图片
漫思
