React-Umeditor 部署本地服务器，上传图片到阿里云Oss，并显示

React-Umeditor是非常好的一个富文本编辑器，非常多的自定义功能，这里主要介绍添加图片后，图片的上传以及外网的访问及在编辑器内显示。

实现这个流程需要三个步骤：

1. 阿里云Oss的创建及配置
2. 本地服务地的部署，主要调用阿里云Oss的api
3. 前端写好React-Umeditor组件的调用，打包成静态文件，部署到本地服务器

其中阿里云Oss需要购买，自行百度哈。

本地服务器的部署，我的这篇文章已经介绍：阿里云OSS文件上传存储和删除，获取文件外网访问路径

这篇文章介绍前端的React-Umeditor使用

React的环境搭建在这篇文章介绍：开发React 环境搭建使用webpack

在github中已经介绍使用方法：github地址

我们主要是注意修改红圈圈起来的部分，修改成我们自己的本地服务器路径。

红圈圈起来的部分选项可以有：

• url: 插件需要的字段 上传路径 ，注意本地服务项目名
• type：插件需要的字段 非‘qiniu’为为本地服务器 ，只要type不为“qiniu”，我们就可以自定义图片上传
• request:插件需要的字段 插件需要的参数，获取图片地址 ，本地服务器返回的字段需要包括这里设定的字段，例如本地服务器返回数据为 {'data': {'image_src': xxx} , 'status':'success'}，那么request需要设为“image_src”
• name: 服务器需要的字段，就是表单参数名

现在做个示范，列出工程：

这个为react打包好的，把他复制到服务器的webapp下，或者自定义路径。

复制后

然后查看预览：

最后试试添加图片：看到预览图啦

html预览中显示了图片外网访问的地址

 大功告成！