vuejs-ckeditor5上传图片到openresty

Amrf 发表于 2020/12/01 14:08:07 2020/12/01
【摘要】 当没有设置adapter时候,上传图片会出现filerepository-no-upload-adapter 的提示;简单的uploadadapter实现参考:https://stackoverflow.com/questions/59190905/vuejs-ckeditor5-upload-images我这里服务端使用的openresty处理上传的文件,另外一篇帖子中有说明(https:...

当没有设置adapter时候,上传图片会出现filerepository-no-upload-adapter 的提示;

简单的uploadadapter实现参考:

https://stackoverflow.com/questions/59190905/vuejs-ckeditor5-upload-images

我这里服务端使用的openresty处理上传的文件,另外一篇帖子中有说明(https://bbs.huaweicloud.com/blogs/215951):

uploader直接写在component之外,另外extraPlugin修正为extraPlugins;

export const uploader = function (editor)
{
    editor.plugins.get('FileRepository').createUploadAdapter = (loader) =>
        new UploadAdapter(loader);
};
...

editorConfig: {
  'extraPlugins': [uploader]
}
由于我们的openresty侧需要filename、type、billingcode三个参数,我们构造一下加到xhr的url中去,web页面侧的修改就完了;

chrome环境下xhr POST form,会发送两次请求,第一次OPTIONS,第二次POST,
需要对OPTIONS做一下处理,否则nginx会报no boundary defined in Content-Type错误;

我们简单处理下

local request_method = ngx.var.request_method
if "OPTIONS" == request_method then
 response.code = 200
 ngx.say("OK")
 return
end

另外还遇到一个问题,上传文件名包含中文时,lua io.open创建的文件名是乱码的(当然这种原文件名创建存储的方式不适用于实际的设计)
这个问题的解决参考https://zhuanlan.zhihu.com/p/157815053,我使用的是actboy168(魔编lua界的老神仙了)的这个修改;

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。