WangEditor上传图片显示上传错误

使用WangEditor上传图片的时候，出现这样的错误

img

前台vue-cli代码如下：

    const editorConfig = {
                placeholder: '请输入内容...' ,
                MENU_CONF:{},
            };
            editorConfig.MENU_CONF['uploadImage']= {
                server: '/editorUpload'
            };

后台controller应该是没有问题的，直接连后台都进不去，不知道怎么原因，谢谢了！

为啥不直接吧富文本内容全部丢给后端呢 , 你读取的时候也不费事

后台接口问题：您提到后台控制器可能没有问题，但可能还是需要仔细检查一下后台接口的实现。确保 /editorUpload 路由能够正确处理文件上传请求，并且返回正确的响应。

后台接口应该是没有问题的，各位大神看看

img

  • 这篇文章：vue 使用 wangEditor(wangEditor图片上传，wangEditor视频上传) 也许有你想要的答案，你可以看看
  • 除此之外, 这篇博客: 在vue中使用wangEditor上传视频中的 总结 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
    • 问题1：标签插入的是iframe但无法全屏播放

    iframe标签加上webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" 属性
    allowfullscreen：用于设置iframe中的信息是否允许开启全屏状态

    <iframe webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="video-iframe" frameborder="0" src=""></iframe>

    • 问题2：标签插入的是iframe但无法全屏播放后换成video
      换成video标签后在编辑器就不能在视频前编辑内容

    • 问题3：开启七牛云配置无法再使用插入网络图片
      wangEditor3使用手册这里有写配置七牛云后无法使用插入网络图片,这里没有使用它自带的七牛云配置，但是自己写的上传网络视频的是可以的

    • 问题4：iframe加上全屏后，在PC端没问题，数据传到移动端全屏后把安卓本身的屏幕换了方向
      全屏显示视频没问题，但是过程体验不好，只好先取消了全屏状态，目前不知道如何处理。。。

    • 问题5：在没改源码前我用的是ant-design的上传组件，绝对定位了个按钮，但是它的问题是必须要点击一下富文本，得到富文本的焦点才能上传成功
      效果图 ↓↓↓
      效果

    <a-upload
	:action="uploadAction"
	:data="{ token: uploadToken && uploadToken.token }"
	:beforeUpload="beforeVideoUpload"
	@change="videoUploadChange"
	:showUploadList="false"
	accept="video/*"
	>
	<a-icon type="youtube" theme="outlined" class="upload-btn" />
</a-upload>


 // 上传视频
beforeVideoUpload(file) {
	return new Promise((resolve, reject) => {
	// 上传 step 1/3 拿到七牛token数据
		zhangApi.qiniuToken({ showPub: true }).then(res => {
			this.uploadToken = res.data
			resolve(file)
		})
	})
},
videoUploadChange(info) {
	if (info.file.status === 'uploading') {
		this.uploadLoading = true
		return
	}
	if (info.file.status === 'done') {
		var response = info.file.response
		this.uploadLoading = false
		// 上传 step 3/3 拿到url
		zhangApi.qiniuUrl({ key: response.key, showPub: false }).then(res => {
			let iframe = res.data.url
			this.editor.txt.append(
			"<video src='" + iframe + "' controls='controls' style='width:300px;height:200px;'></video>"
			) //把视频链接赋值给editor
			if (iframe) {
				// this.$Message.success('上传视频成功！')
			} else {
				this.$Message.error('上传视频失败！')
			}
		})
	}
}

    .upload-btn {
  position: absolute;
  cursor: pointer;
  top: 14px;
  right: 60px;
}
    • 问题6：修改源码后到不同环境打包依赖包应该是不会有变化的
      我把它单独提出来做的修改，然后相当于自己的插件，去上传到npm上使用的，上传npm教程我也有写， 地址在这，然后在自己项目中npm install zhangeditor去安装自己的插件使用，有了解的大佬欢迎指导该如何正确修改源码后使用O(∩_∩)O~

    参考来源：https://www.lagou.com/lgeduarticle/99623.html