站长工具查询网,汕头vi设计公司,如何组做网站,基于 wordpress 商城Toast UI Editor国内文档几乎搜不到#xff0c;国外文档也写得不是特别项目#xff0c;没有太多举例的demo。一开始选择使用这个就是因为UI好看。不过看看源码把思路滤清了。 他会给把图片转成Base64#xff0c;到时候发表单直接丢过去就行了#xff0c;blob这个参数能拿到…Toast UI Editor国内文档几乎搜不到国外文档也写得不是特别项目没有太多举例的demo。一开始选择使用这个就是因为UI好看。不过看看源码把思路滤清了。 他会给把图片转成Base64到时候发表单直接丢过去就行了blob这个参数能拿到一些其他信息可以根据自己的需求进行提取。log一下就能看到结构 通过官网找到钩子函数 定义钩子函数 hooks - addImageBlobHook
let editor new toastui.Editor({el: document.querySelector(#editor),initialEditType: markdown, // 初始编辑类型这里是 MarkdownpreviewStyle: vertical, // 预览样式可以是 tab, verticalheight: 700px, // 编辑器高度,language: zh-CN, // 设置语言为中文hooks: {addImageBlobHook: (blob, callback) {uploadImage(blob, function (imageUrl) {callback(imageUrl); // 将链接传递给编辑器}, function (error) {console.error(图片上传失败, error);});},}});定义上传图片的方法
function uploadImage(imageBlob, successCallback, errorCallback) {// 实现图片上传逻辑使用 jQuery 的 AJAX$.ajax({url: {{ url_for(admin.upload) }},type: POST,data: imageBlob,processData: false,contentType: false,success: function (data) {if (data.code 0) {successCallback(data.data.url);} else {errorCallback(图片上传失败);}},error: function () {errorCallback(图片上传失败);}});}Flask路由
bp.route(/upload, methods[post])
def upload():文章管理-资源上传API:return:file request.datafilename uploaded_image.pngwith open(filename, wb) as f:f.write(file)print(file)return ok效果
