Vue整合wangEditor图片上传失败解决方案

最新推荐文章于 2025-05-29 11:33:52 发布

什么都没有丶

最新推荐文章于 2025-05-29 11:33:52 发布

阅读量7.4k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Vue富文本文章标签： Vue wangEditor 富文本 Vue上传图片 Vue整合wangEditor

本文链接：https://blog.csdn.net/qq_40335081/article/details/86494815

在尝试重写wangEditor的图片上传方法失败后，采用直接修改源代码的方式解决问题。通过Alt+点击customConfig进入源码，修改uploadImgServer为实际的图片上传接口，并在选择图片后进入uploadImg方法，根据后台返回数据进行判断，成功插入图片链接，解决了上传失败的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近项目需要，在vue里加入富文本，用来发表文章，第一次接触Vue整合富文本。
于是去网上查了一下。网上一大堆，但是都没能解决图片上传问题，报了一堆错。

错误代码
错误示范。想着重写一下他的上传方法。但是使用post请求发现这个formData是空的。request里没有值。，在后台输出也报了null。

既然重写不行，就来个暴力点的、直接改源代码。
在这里插入图片描述
这些是wangEdit的控件。我们要改的是插入图片的image

直接 Alt + 点击customConfig 进入源代码

搜索 uploadImgServer 这里修改上传的图片接口地址
以及以64Base显示

在这里插入图片描述

搜索image，一直找到触发选择图片
在这里插入图片描述

找到选择图片完毕，这里选择文件完成之后就会进行上传，我们进uploadImg上传方法
在这里插入图片描述

找到返回数据。发送完成后，后台返回数据、在这边进行判断、直接改源码的方

最低0.47元/天解锁文章

200万优质内容无限畅学