Vue整合wangEditor圖片上傳失敗解決方案

最近項目需要,在vue里加入富文本,用來發表文章,第一次接觸Vue整合富文本。
於是去網上查了一下。網上一大堆,但是都沒能解決圖片上傳問題,報了一堆錯。

錯誤代碼
錯誤示範。想着重寫一下他的上傳方法。但是使用post請求發現這個formData是空的。request裏沒有值。,在後臺輸出也報了null。

既然重寫不行,就來個暴力點的、直接改源代碼。
在這裏插入圖片描述
這些是wangEdit的控件。我們要改的是插入圖片的image

直接 Alt + 點擊customConfig 進入源代碼

搜索 uploadImgServer 這裏修改上傳的圖片接口地址
以及以64Base顯示

在這裏插入圖片描述

搜索image,一直找到觸發選擇圖片
在這裏插入圖片描述

找到選擇圖片完畢,這裏選擇文件完成之後就會進行上傳,我們進uploadImg上傳方法
在這裏插入圖片描述

找到返回數據。發送完成後,後臺返回數據、在這邊進行判斷、直接改源碼的方法。
在這裏插入圖片描述

輸出xhr會發現返回值 ,最後用 _this3.insertLinkImg(圖片鏈接);插入圖片。完成~~
在這裏插入圖片描述

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章