猿问

bootstrap-wysiwyg 图片上传到后台 koa2

bootstarp-wysiwyg
koa-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~~

守着一只汪
浏览 741回答 1
1回答

aluckdog

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;});...
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答