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
var imgData = req.body.imgData;
var base64Data = place(/^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 = v.PORT || 3000;图片编辑器app
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⽂件夹就会收到⼀张新的图⽚
发布评论