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

最新推荐文章于 2024-06-21 10:08:26 发布
最新推荐文章于 2024-06-21 10:08:26 发布
阅读量6.9k 收藏 4
点赞数 3
分类专栏： Vue富文本 文章标签： Vue wangEditor 富文本 Vue上传图片 Vue整合wangEditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40335081/article/details/86494815
版权 
最近项目需要，在vue里加入富文本，用来发表文章，第一次接触Vue整合富文本。
于是去网上查了一下。网上一大堆，但是都没能解决图片上传问题，报了一堆错。

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

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

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

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

在这里插入图片描述

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

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

最低0.47元/天 解锁文章
什么都没有丶
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
WangeDitor 富文本编辑器 vue2项目 图片上传服务器转地址存编辑器中
苏小茜的博客
07-29 1512
创建wangeditor.vue文件当作子组件使用,需要使用的页面直接引入组件即可。 图片上传服务器转地址存编辑器中
vue3+wangEditor5自定义上传音频+视频
07-05
在本文中，我们将深入探讨如何在Vue3项目中结合wangEditor5实现自定义上传音频和视频功能。wangEditor5是一款轻量级且功能强大的富文本编辑器，它提供了丰富的API和自定义选项，使得在Vue3这样的现代前端框架中集成...
关于wangEditor的图片上传失效的解决办法
csdn_jy的博客
09-15 7498
相信用过wangEditor的程序员（媛）都知道，这是一个轻量级富文本编辑器,每每用它的时候总有一种麻雀虽小，五脏俱全的感觉，挺好用的！ 但是偶尔也会有些小坑踩踩，接下了我将介绍一个在我的业务里面遇到的坑。。。 业务介绍，该编辑器我是在上传数据时用到的，每一条数据都会绑定至少一个或者是一个以上的编辑器，为提高效率，我让其在首页加载时就创建所需的编辑器，也避免了在重新打开一条记录进行上传或修改时...
vue3 wangeditor/editor-for-vue 富文本使用支持上传图片等
最新发布
ygbwan的博客
06-21 633
/ 'editVideoSize', // 编辑视频大小。// 'codeSelectLang' // 选择代码语言。// 'insertVideo', // 插入视频。// 'uploadVideo', // 上传视频。'insertTableRow', // 插入行。'insertTableCol', // 插入列。'bulletedList', // 无序列表。
文本------富文本+富文本图片上传（下）配置富文本图片上传地址，Cannot get upload server address没有配置上传地址Error: Cannot get upload
weixin_54048131的博客
05-01 657
【代码】文本------富文本+富文本图片上传（下）配置富文本图片上传地址，Cannot get upload server address没有配置上传地址Error: Cannot get upload。
WangEditor上传图片 失败
qq_39137555的博客
07-05 5321
WangEditor 上传图片失败问题 最近接触了一下富文本编辑器 Wangeditor 基本能满足一些文本的写入但是在上传图片的时候总是发生一些错误。分享一下我的解决历程吧，可能我是个菜鸡，有不对的多多教导一下。 先看错误的提示 首先看到这个我就已经头疼了，我在引入Wangeditor时没有给任何报错，所以需要在js中加这样有一行代码 editor.customConfig.debug...
Vue整合wangEditor 富文本上传图片失败解决
Shelysure的博客
08-17 1432
我是在配置服务端接口这里出了错 格式一定要一一对应 我在写错误信息的时候理所当然的把错误熟悉写成了error 但他格式要求是errno 所以导致一直上传失败，更改过后重新启动就成功了
wangEditor上传不了图片
qq_41883461的博客
10-16 3724
wangEditor Typescript 开发的 Web 富文本编辑器，轻量、简洁、易用、开源免费 vue引入wangEditor之后遇见一个问题，在编辑器中图片上传的时候会报错，图片导入不进去 通过报错找出原因，图片是上传到服务器的，服务器会经常出问题，所以上传图片最好换成Base64的。这时要注意存储图片的参数类型，Base64生成的字符非常长，所以类型最好是String类型，范围最大255 具体做法是找到配置： editor.config.uploadImgServer = true 改为
wangEditor图片上传
热门推荐
王明晓的博客
02-17 1万+
1.图片上传 var E = window.wangEditor var editor = new E('#editorMenu','#editor') //开启debug模式 editor.customConfig.debug = true; // 关闭粘贴内容中的样式 editor.customConfig.pasteFilterStyle = false // 忽略粘贴内容...
vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
01-07
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，用过的小伙伴都知道…，最后换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传等功能，支持 IE10+ 浏览器。 官网：...
使用Vue实现图片上传的三种方式
10-18
本文将详细介绍使用Vue实现图片上传的三种方式，分别是：云储存上传、传统文件服务器上传以及基于axios的自定义上传。 1. **云储存上传** 云储存服务如七牛云、阿里云OSS（Object Storage Service）等提供了便捷的...
基于Vue的云视讯入住解决方案设计源码
05-31
云视讯入住解决方案项目源码，共91个文件，采用Vue、JavaScript和HTML等语言开发，涉及多种文件类型如PNG图片、JPG图片、JavaScript脚本、JSON配置文件、Vue组件、CJS文件、Git忽略文件、Markdown文档、HTML文档和...
vue的路由映射问题及解决方案
01-19
今天在项目中遇到了一个问题，明明在Router文件夹下的路由js映射文件中，配置好了，如下： // 生日贺卡 { path: 'birthdayRemind', component: load('@/components/app/birthdayRemind/BirthdayRemind')} ...
wangEditor使用与配置图片上传
Bug制造者
06-24 2917
html： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>UE</title> <link rel="stylesheet" href=""> <script src="http://cod
wangEditor后台上传成功但是，前端提示上传图片失败
鲨鱼亲吻小鹿的博客
04-08 424
wangEditor后台上传成功但是，前端提示上传图片失败
wangEditor富文本编辑器图片/视频上传
The One Who's at the Front
08-22 2953
Vue + wangEditor富文本编辑器上传图片和视频。
在使用vue-admin-template中使用wangeditor上传文件时会报错o.upload.addEventListener is not a function
weixin_58661581的博客
03-24 374
2-2、在vue.config.js将before: require('./mock/mock-server.js')注释掉。2-1、npm uninstall mockjs 删除该模块依赖。在本地测试时可以上传，打包到服务器就报错，原因就在打包错的问题。==> 菜单配置 | wangEditor。开源 Web 富文本编辑器，开箱即用，配置简单。与 获取文件progress冲突。1、自定义上传图片的方法，参考官网。2-3、在src/main.js将。不熟悉的情况下推荐第二种方法。2、删掉mockjs相关。
vue3+wangeditor自定义上传图片视频
qq_41397941的博客
02-19 1664
vue3+wangeditor富文本编辑器自定义上传图片、视频组件
vue3使用富文本编辑器wangeditor，支持实现图片上传的功能
技术前端，忠于热爱 @回忆哆啦没有A梦
07-12 4238
vue3使用富文本编辑器wangeditor，支持完全自己实现图片上传的过程，如上传图片到某个云服务器，走后端接口上传图片。
vue3wangeditor上传图片
11-18
为了在Vue3中使用wangeditor并实现上传图片功能，需要进行以下步骤： 1. 安装wangeditor和axios ```shell npm install wangeditor axios --save ``` 2. 在组件中引入wangeditor和axios ```javascript import WangEditor from 'wangeditor' import axios from 'axios' ``` 3. 在组件的mounted钩子函数中初始化wangeditor ```javascript mounted() { const editor = new WangEditor('#editor') editor.config.uploadImgServer = '/upload' // 上传图片的接口地址 editor.config.uploadFileName = 'file' // 上传图片的文件名 editor.config.uploadImgHeaders = { // 上传图片时需要携带的请求头 Authorization: 'Bearer ' + localStorage.getItem('token') } editor.config.uploadImgHooks = { // 上传图片的回调函数 customInsert: function (insertImg, result, editor) { if (result.code === 200) { insertImg(result.data.url) } else { alert('上传失败') } } } editor.create() } ``` 4. 在组件中添加一个textarea元素，并将其id设置为editor ```html <template> <div> <textarea id="editor"></textarea> </div> </template> ``` 5. 在后端实现上传图片的接口，并将其地址填写到第3步中的uploadImgServer属性中 ```javascript const express = require('express') const multer = require('multer') const app = express() const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { cb(null, Date.now() + '-' + file.originalname) } }) const upload = multer({ storage: storage }) app.post('/upload', upload.single('file'), (req, res) => { const file = req.file if (!file) { const error = new Error('Please upload a file') error.httpStatusCode = 400 return next(error) } res.send({ code: 200, data: { url: 'http://localhost:3000/' + file.path } }) }) app.listen(3000, () => { console.log('Server started on port 3000') }) ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值