引入wysiwyg-editor字体,css,jquery,js,汉化包 <link href="/public/admin/wysiwyg-editor/css/font-awesome.min.css" rel=“stylesheet” type=“text/css” /> <!– Include Editor style. –> <link href="/public/admin/wysiwyg-editor/css/froala_editor.pkgd.min.css" rel=“stylesheet” type=“text/css” /> <link href="/public/admin/wysiwyg-editor/css/froala_style.min.css" rel=“stylesheet” type=“text/css” /> <!– 引入jquery –> <!– Include Editor JS files. –> <script type=“text/javascript” src="/public/admin/wysiwyg-editor/js/froala_editor.pkgd.min.js"></script> <script type=“text/javascript” src="/public/admin/wysiwyg-editor/js/zh_cn.js"></script>前端配置wysiwyg-editorheight 高度language 语言imageUploadURL 图片上传地址toolbarButtons ,toolbarButtonsMD ,toolbarButtonsSM 不同分辨率显示工具 <script> $(function() { $(’#content’).froalaEditor({ height: 300, //给编辑器设置默认的高度 language: ‘zh_cn’, imageUploadURL: ‘/admin/goods/goodsUploadImage’, //根据不同的分辨率加载不同的配置 toolbarButtons: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-’, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’], toolbarButtonsMD: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-’, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’], toolbarButtonsSM: [‘fullscreen’, ‘bold’, ‘italic’, ‘underline’, ‘strikeThrough’, ‘subscript’, ‘superscript’, ‘|’, ‘fontFamily’, ‘fontSize’, ‘color’, ‘inlineStyle’, ‘paragraphStyle’, ‘|’, ‘paragraphFormat’, ‘align’, ‘formatOL’, ‘formatUL’, ‘outdent’, ‘indent’, ‘quote’, ‘-’, ‘insertLink’, ‘insertImage’, ‘insertVideo’, ’embedly’, ‘insertFile’, ‘insertTable’, ‘|’, ’emoticons’, ‘specialCharacters’, ‘insertHR’, ‘selectAll’, ‘clearFormatting’, ‘|’, ‘print’, ‘spellChecker’, ‘help’, ‘html’, ‘|’, ‘undo’, ‘redo’] }); }); </script>后台配置图片上传router.jsrouter.post(’/admin/goods/goodsUploadImage’, controller.admin.goods.goodsUploadImage);controllerapp/controller/admin/goods.js async goodsUploadImage() { //实现图片上传 let parts = this.ctx.multipart({ autoFields: true }); let files = {}; let stream; while ((stream = await parts()) != null) { if (!stream.filename) { break; } let fieldname = stream.fieldname; //file表单的名字 //上传图片的目录 let dir=await this.service.tools.getUploadFile(stream.filename); let target = dir.uploadDir; let writeStream = fs.createWriteStream(target); await pump(stream, writeStream); files=Object.assign(files,{ [fieldname]:dir.saveDir }) } console.log(files); //图片的地址转化成 {link: ‘path/to/image.jpg’} this.ctx.body={link: files.file}; } 图片上传不经过csrf报错解决办法config/config.default.js config.security = { csrf: { // 判断是否需要 ignore 的方法，请求上下文 context 作为第一个参数 ignore: ctx => { if(ctx.request.url==’/admin/goods/goodsUploadImage’){ return true; } return false; } } }成功效果