1. 程式人生 > >適用於React的富文字編輯器 -- react-umedito 圖片上傳本地伺服器解決方案

適用於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: 伺服器需要的欄位

總結:解決問題並不難,主要是解決的過程;通過閱讀原始碼,瞭解外掛本身的實現過程,去尋找解決問題的方法,對自己來說也是一個難得的學習過程。