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

柔情只为你懂 2022-05-31 12:20 329阅读 0赞

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

插件源码 路径：  
`node_modules\react-umeditor\lib\utils\FileUpload.js`：  
![这里写图片描述][70 1]

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

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

[react-umeditor]: https://link.jianshu.com/?t=https://github.com/liuhong1happy/react-umeditor
[react-umeditor github]: https://github.com/liuhong1happy/react-umeditor
[70]: /images/20220531/83952ec3c13b40338e9cfa8b26450862.png
[70 1]: /images/20220531/d80eee969cdb4d928e95126e059c97a7.png
[70 2]: /images/20220531/271dfdab65254657bbf82cdc97b39428.png
[70 3]: /images/20220531/1eb0a0909a084f4198d0eb9e83ff50bc.png