适用于React的富文本编辑器 -- react-umedito 图片上传本地服务器解决方案

react-umeditor,这是liuhong1happy同学将百度富文本编辑器用react封装的一个组件。
安装:npm install react-umeditor –save
使用:react-umeditor github文档中有介绍
这篇文章不是介绍插件是怎么用的,是总结如何将图片上传到本地服务器,并且正常使用。
问题:插件本身使用七牛作为图片服务器,与实际需求不符,我们希望上传到自己的服务器并且能正常使用。
插件本身图片上传机制:
本地配置上传图片代码:
这里写图片描述

插件源码 路径:
node_modules\react-umeditor\lib\utils\FileUpload.js
这里写图片描述

判断参数type的值是否为”qiniu”,然后决定body的值。
由此可见,插件支持上传图片到本地服务器,只需要配置type值为非”qiniu”即可。
插件源码 路径:
node_modules\react-umeditor\lib\components\plugins\ImageUpload.react.js
这里写图片描述
根据插件源码拼接的body设置本地服务器返回字符串:
{
data:{
image_src: ‘XXXXXXXX’ //image_src可替换为其他,前端配置request即可
}
status: “success”
}
解决方案:
前端配置如下:
这里写图片描述
url: 插件需要的字段 上传路径
type:插件需要的字段 非‘qiniu’为为本地服务器
request:插件需要的字段 插件需要的参数,获取图片地址
name: 服务器需要的字段

总结:解决问题并不难,主要是解决的过程;通过阅读源码,了解插件本身的实现过程,去寻找解决问题的方法,对自己来说也是一个难得的学习过程。

猜你喜欢

转载自blog.csdn.net/qq_34149935/article/details/79363353