TinyMCE上传图片后端处理写法

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

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

第一种写法具体如下:




    
    TinyMCE图片上传测试
    
    


    

这样所有的图片都会以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("保存成功!");
        }
    });
});

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




    
    TinyMCE图片上传测试
    
    


    

后端图片处理:

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

你可能感兴趣的:(日志)