·基於thinkphp5.0和百度編輯器UMeditor 跨域上傳圖片實現


1、下載兩者源碼;

2,簡單配置 :

      a. 一套thinkphp框架是顯示前端界面,搭配編輯器環境。對應域名為 http://tp.com;

        

         這是前端界面配置 但是還要修改一下umeditor.config.js 文件    這里配置那個URL ,我思考了很久  

        我是這么想的  本地站點域名配置到了www/tp5/public位置 ,現在是要實例編輯器加一個路徑,而編輯器的文件位置就在public下面:

        

       在此情況下 編輯器會在界面正常顯示:

        

        好接下來考慮的問題就是圖片上傳了。這一步暫時先不說。先說說API接口配置。

         b.一套thinkphp框架提供API接口調用。使用的是編輯器自帶的php上傳方法。 對應的域名是 http://tp_api.com

         因為考慮到跨域的原因所以 在入口文件里面進行允許跨域操作:

          

         修改編輯器自帶的上傳圖片方法

            

         到這個時候兩邊都已經配置好,現在來說一下上傳的問題 :

        c.圖片上傳--跨域

           在網上資料都有說明和編輯器官方文檔也有說明 不支持單張圖片跨域上傳。有很多小伙伴也在網上公布了跨域上傳的解決辦法。可能在各自的開發環境下都是成功的。但是對於我說,只能另辟蹊徑了。

        這里參考了以為小伙伴的建議,對我說受益匪淺   這是網址鏈接 :http://www.cnblogs.com/hpnet/p/6290452.html。

             這是一種解決跨域上傳的辦法:
             

           但是在我這邊是不可以使用這種方法,前端界面不能使用php進行數據的轉換和傳遞。【具體原因也說不清】。只能考慮修改js進行圖片上傳

           也就是在訪問這個地址的時候圖片是在后台上傳成功的。但是返回來的json數據是無法接收的。問題就在這里。出現報錯的界面如下:

      

      在上傳操作過程中與之有關的js是dialog/image/image.js文件,通過實際測試知道一個問題就是 只要一個json數組賦值給變量 r 那所有的問題解決了:

        

       第一想法就是使用ajax異步請求數據。重新請求一次數據。在圖片上傳的時候 把返回的json數據存入到session中。在執行js文件的時候用ajax跨域請求某一個接口,並返回數據。

      也就有了下面js文件的配置:

           

           

           

           對應的接口【上面有顯示】非常注意jsonp的請求格式

         

           實際過程中 js調試是個很大的問題,異步返回的數據有延遲效應,必須把對應的操作放到success的方法中:通過斷點調試一個一個的找。才發現問題。

            還有一個問題就是一定要搞清楚實際的js代碼流程順序。很重要,要分清代碼之間的邏輯關系。

            還有一個問題是:最初的想法是ajax請求接口返回數據直接賦值給變量r即可。把實際邏輯操作放到sucess中,。但是實際的結果並不是正常的。那么思考問題的方向應該是 數據拿到了,那么只能是success里面的功能操作出了問題。要找到問題的症結所在。使用瀏覽器自帶的斷點調試。一步步的走下去。問題自然會出來。

 

     到這個時候。再去進行跨域圖片上傳。完美。

 

 

 

 熬了今天,在大神的幫助下完美解決。學到了不少。。。。。

        


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM