真正解決百度編輯器UEditor上傳圖片跨域問題
阿新 • • 發佈:2020-02-16
做前後端分離的專案用到UEditor,把上傳圖片程式拿出來放到了介面程式中,上傳圖片介面已經做了跨域處理,按理說編輯器中上傳圖片應該不會有問題。可是配置好圖片上傳路徑後,執行,開啟除錯,測試一下,報錯了:
找到上傳圖片的程式碼,發現引用的是webuploader.js,先修改下,直接引用webuploader.js。
經過除錯找到,實際上傳圖片走的就是這裡了,webuploader.js檔案。
起初在網上查,嘗試了各種方案修改前後端程式碼,都不成功。偶然想起用jquery ajax上傳試試吧,正好程式已經引用了jquery。於是修改上面那行程式碼:
$.ajax({ url:server, dataType:'json', type:opts.method, async: false, data: formData, processData : false, // 使資料不做處理 contentType : false, // 不要設定Content-Type請求頭 success: function(data){ console.log(data); }, error:function(response){ console.log(response); } }); // xhr.send( formData );
一試之下,竟然成功了,看來後端的跨域設定肯定沒問題。
那這樣也不行啊,前端進度什麼的都沒了。
找到更新進度的程式碼,就這裡了。
那讓jquery ajax使用這裡的xhr物件行不行呢,試一下,修改上傳部分程式碼:
$.ajax({ url:server, dataType:'json', type:opts.method, async: false, data: formData, xhr: function(){ return xhr; // 使用上面初始化好的 xhr 物件 }, processData : false, // 使資料不做處理 contentType : false, // 不要設定Content-Type請求頭 success: function(data){ console.log(data); }, error:function(response){ console.log(response); } }); // xhr.send( formData );
上傳圖片測試一下,ok,成功啦。
看起來似乎就這麼結束了,可這對我來說這算是意外之喜,我真沒覺得這樣就能成功。寫文章之前真正用的時候可沒這麼容易就解決這個問題。
好吧,對比了下,發現之前寫的程式碼沒有 async: false 這個屬性。好,現在註釋掉這個屬性再試,果然不行了,跨域錯誤又報出來了。
下面說另一種能非同步上傳的解決方案,研究過程就不說了。
1、找到這行程式碼,註釋掉,去掉請求頭的設定。
2、找到負責更新進度的程式碼,註釋掉這一段
3、把剛才修改成jquery ajax上傳的程式碼刪掉,用原來的程式碼
再試,ok,是成功的,更新進度的功能依然存在。
說明一下:這裡用的是編輯器的多圖上傳,單圖上傳的沒使用,想來修改方法應該也是同樣的,需要用的可以自己嘗試修改。