VUE + UEditor 單圖片跨域上傳功能的實(shí)現(xiàn)方法
UEditor官網(wǎng)說不提供單圖片的跨域，所以只能自己解決。查了網(wǎng)上的很多方案，但是沒看到和vue一起用的，不過倒是獲得了一些思路。本著不想改太多源代碼的基礎(chǔ)上嘗試著...一不小心就可以用了 解決方案：上傳單圖片的時(shí)后端不直接返回JSON，而是重定向到前端頁面
前端：VUE
后端：WAMP + ThinkPHP5.0
前端
1、去官網(wǎng)下載UEditor到vue中，打開ueditor.config.js配置服務(wù)器路徑(本地域名可以去hosts文件中添加)，下面是我的配置
2、打開ueditor.all.js查找<input id= 在后面添加標(biāo)識(shí)以便后端判斷是否是單圖片上傳：
3、創(chuàng)建一個(gè)頁面展示JSON數(shù)據(jù)。我直接用路由參數(shù)接收返回的結(jié)果后再拼接，整個(gè)JSON接收不到，所以只好拆開了，沒有顯示所有的JSON,只獲取state和url。暫時(shí)不懂不訪問接口用什么方式接收后端數(shù)據(jù)，如果有好的解決方式歡迎提出。
后端
1、把UEditor的PHP版本下載下來，里面的PHP文件夾下的文件復(fù)制到項(xiàng)目中，在Controller中的輸出結(jié)果中添加判斷，單圖片不直接返回結(jié)果
2、Config.json修改訪問路徑和保存路徑
這樣就基本完成了，看看效果 單圖
總結(jié)
以上所述是小編給大家介紹的VUE + UEditor 單圖片跨域上傳功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
- vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
- vue項(xiàng)目中使用ueditor的實(shí)例講解
- Vue2.0中集成UEditor富文本編輯器的方法
- vue中使用ueditor富文本編輯器
- vue引入ueditor及node后臺(tái)配置詳解
- nodejs+mongodb+vue前后臺(tái)配置ueditor的示例代碼
- vue2.0項(xiàng)目中使用Ueditor富文本編輯器示例代碼
- Vue.js結(jié)合Ueditor富文本編輯器的實(shí)例代碼
- 詳解vue.js+UEditor集成 [前后端分離項(xiàng)目]
- vue集成百度UEditor富文本編輯器使用教程
相關(guān)文章
windows下vue.js開發(fā)環(huán)境搭建教程
這篇文章主要為大家詳細(xì)介紹了windows下vue.js開發(fā)環(huán)境搭建教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue Element前端應(yīng)用開發(fā)之界面語言國際化
我們開發(fā)的系統(tǒng)，一般可以不用考慮語言國際化的問題，大多數(shù)系統(tǒng)一般是給本國人使用的，而且直接使用中文開發(fā)界面會(huì)更加迅速 一些，不過框架最好能夠支持國際化的處理，以便在需要的時(shí)候，可以花點(diǎn)時(shí)間來實(shí)現(xiàn)多語言切換的處理，使系統(tǒng)具有更廣泛的受眾用戶。2021-05-05
VUE接入騰訊驗(yàn)證碼功能（滑塊驗(yàn)證）備忘
這篇文章主要介紹了VUE接入騰訊驗(yàn)證碼功能（滑塊驗(yàn)證）備忘,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue2.0 axios前后端登陸攔截器(實(shí)例講解)
下面小編就為大家?guī)硪黄猇ue2.0 axios前后端登陸攔截器(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要介紹了vue中的slot封裝組件彈窗，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要介紹了Vue?element?ui用戶展示頁面的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue中使用protobuf踩坑記，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法
今天小編就為大家分享一篇vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
在Vue中使用Avue、配置過程及實(shí)際應(yīng)用小結(jié)
在項(xiàng)目中遇到通過點(diǎn)擊加號(hào)實(shí)現(xiàn)輸入框的增加、以及對該輸入框的輸入內(nèi)容進(jìn)行驗(yàn)證，通過這些誘導(dǎo)因素創(chuàng)作的這篇文章，本文重點(diǎn)給大家介紹在Vue中使用Avue、配置過程以及實(shí)際應(yīng)用,需要的朋友可以參考下2022-10-10