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

標籤：跨域   alt   之間   支援   介面   網站   .com   瀏覽器   建議   

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裡面的功能操作出了問題。要找到問題的癥結所在。使用瀏覽器內建的斷點調試。一步步的走下去。問題自然會出來。

 

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

 

 

 

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

        

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