vue + ueditor 單圖片跨域上傳

UEditor官網說不提供單圖片的跨域,因此只能本身解決。查了網上的不少方案,可是沒看到和vue一塊兒用的,不過卻是得到了一些思路。本着不想改太多源代碼的基礎上嘗試着...一不當心就能夠用了
解決方案:上傳單圖片的時後端不直接返回JSON,而是重定向到前端頁面前端

前端:VUE
後端:WAMP + ThinkPHP5.0vue

前端

端口:http://localhost:8888
一、去官網下載UEditor到vue中,打開ueditor.config.js配置服務器路徑(本地域名能夠去hosts文件中添加),下面是個人配置json

clipboard.png

二、打開ueditor.all.js查找<input id= 在後面添加標識以便後端判斷是不是單圖片上傳:<input type="hidden" name="issimpleupload" value="true" />後端

clipboard.png

三、建立一個頁面展現JSON數據。我直接用路由參數接收返回的結果後再拼接,整個JSON接收不到,因此只好拆開了,沒有顯示全部的JSON,只獲取state和url。暫時不懂不訪問接口用什麼方式接收後端數據,若是有好的解決方式歡迎提出。跨域

clipboard.png

後端
http://localhost.server.com
一、把UEditor的PHP版本下載下來,裏面的PHP文件夾下的文件複製到項目中,在Controller中的輸出結果中添加判斷

clipboard.png

二、Config.json修改訪問路徑和保存路徑服務器

圖片描述

這樣就基本完成了,看看效果
單圖url

clipboard.png

clipboard.png

若有不足歡迎提出spa

相關文章
相關標籤/搜索