bootstrap-wysiwyg 图片上传到后台 koa2

Question

bootstarp-wysiwygkoa-multer这里用了官方最简单例子:后台代码const Koa = require('koa');const route = require('koa-route');const multer = require('koa-multer'); const app = new Koa();const upload = multer({ dest: 'uploads/' }); app.use(route.post('/profile', upload.single('avatar'))); app.listen(3000)bootstrap-wysiwyg本身没有实现文件上传，所以要改源码：百度了很多种方法，查看源码都说修改 readFileIntoDataUrl方法:    var readFileIntoDataUrl = function (fileInfo) {        // var loader = $.Deferred(),        //     fReader = new FileReader();        // fReader.onload = function (e) {        //     loader.resolve(e.target.result);        // };        // fReader.onerror = loader.reject;        // fReader.onprogress = loader.notify;        // fReader.readAsDataURL(fileInfo);        // return loader.promise();     var form = new FormData();     form.append("file", fileInfo);     var xhr = new XMLHttpRequest();     xhr.open("post", "/profile", false);     xhr.send(form);     return xhr.responseText;};    然后求大神修改！5555～～

Answer 1

Multer is a node.js middleware for handling multipart/form-data for koa.

multer wrapper for koa's middleware.

至于怎么上传文件还不是很懂。

但是我们用另一种方法：上传base64,后台再处理base64

    var readFileIntoDataUrl = function (fileInfo) {

        // var loader = $.Deferred(),

        //     fReader = new FileReader();

        // fReader.onload = function (e) {

        //     loader.resolve(e.target.result);

        // };

        // fReader.onerror = loader.reject;

        // fReader.onprogress = loader.notify;

        // fReader.readAsDataURL(fileInfo);

        // return loader.promise();

        var loader = $.Deferred(),

              fReader = new FileReader();

        fReader.onload = function (e) {

        $.ajax({

            url: '/base64',

            method: 'post',

            data: {img: e.target.result}

        }).done(function(msg) {

            loader.resolve(msg.url);

        });            

        };

        fReader.onerror = loader.reject;

        fReader.onprogress = loader.notify;

        fReader.readAsDataURL(fileInfo);

        return loader.promise();        

    };

....

async function a(dataBuffer,type) {

    var name = Date.now() +'.' + type;

    var url = __dirname + '/app/public/uploads/'+name

    return new Promise(function(resolve, reject) {

        fs.writeFile(url, dataBuffer, function(err) {

            if(err){

                reject(err);

            }else{

                resolve({

                    url: '/uploads/'+name

                });

            }

        });

    });    

}

router.post('/base64', async function(ctx, next) {

    var imgData = ctx.request.body.img;

    //过滤data:URL

    var base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");

    var type = imgData.replace(/data:image\/([^;]+).*/i,'$1');//取类型

    var dataBuffer = new Buffer(base64Data, 'base64');    

    var img = await a(dataBuffer,type);    

    console.log(img);

    return ctx.body = img;

});

...