一、环境介绍

@vue/cli 4.3.1

webpack 4.43.0

ueditor1.4.3.3 jsp版

二、springboot集成ueditor,实现分布式图片上传

参考我的另一篇博客,《微服务迁移记(五):WEB层搭建(5)-集成ueditor编辑器,伪分布式图片上传

配置完成后,有一个http://192.168.43.89:3000/ueconfig配置接口提供外网访问。

三、vue2.0 集成ueditor

1. 下载ueditor源码,放入/public/static目录(网上很多说放入public就行了,实际代码写死了是找/public/static目录的UEditor),并配置ueditor.config.js

// 服务器统一请求接口路径

 , serverUrl:  "http://192.168.43.89:3000/ueconfig"

2. npm i vue-ueditor-wrap 安装插件

3. 引入插件

import VueEditorWrap from 'vue-ueditor-wrap'
.....
data() {
  return {
   ueconfig: {
toolbars: [
['fullscreen', 'undo', 'redo', 'bold','italic', 'underline', 'fontborder', 'strikethrough', 'removeformat','forecolor','backcolor','fontfamily', 'fontsize','customstyle', 'paragraph',
'|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','insertimage'
]
]
}
  }
}
components: {
VueEditorWrap
},
.....
<VueEditorWrap v-model="comment_content" :config="ueconfig" />

前台预览后,出现错误,造成图片上传功能不可使用,其他编辑功能正常。

Cross-Origin Read Blocking (CORB) blocked cross-origin response http://192.168.43.89:3000/ueconfig?action=config&callback=bd__editor__hfkwb3

究其原因主要是跨域,通过访问http://192.168.43.89:3000/ueconfig?action=config&callback=bd__editor__hfkwb3,可以看到ueditor已经进行了jsonp的跨域处理,但始终无法通过。决定伪装访问ueconfig



四、本地代理访问ueconfig URL

在vue.config.js中增加如下配置项:
module.exports = {
devServer: {
proxy: {'/iot/ue': {
target: 'http://192.168.43.89:3000/ueconfig',
changeOrigin: true,
pathRewrite: {
'^/iot/ue': ''
}
}
}
}

配置ue的ServerURL地址为:

ueconfig: {
serverUrl: '/iot/ue',
toolbars: [
['fullscreen', 'undo', 'redo', 'bold','italic', 'underline', 'fontborder', 'strikethrough', 'removeformat','forecolor','backcolor','fontfamily', 'fontsize','customstyle', 'paragraph',
'|','rowspacingtop', 'rowspacingbottom', 'lineheight', '|','justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','insertimage'
]
]
}

相当于告诉ue,我是local访问的,并没有跨域,ue居然就这么相信了!

再次访问,成功上传图片

 

vue“欺骗”ueditor,实现图片上传的更多相关文章

  1. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  2. 在SAE上使用Ueditor的图片上传功能

    SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...

  3. springboot整合ueditor实现图片上传和文件上传功能

    springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...

  4. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  5. 单独调用Ueditor的图片上传功能

    <!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...

  6. asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试

    1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...

  7. UEditor使用------图片上传与springMVC集成 完整实例

    UEditor是一个很强大的在线编辑软件 ,首先讲一下 基本的配置使用 ,如果已经会的同学可以直接跳过此节 ,今天篇文章重点说图片上传; 一  富文本的初始化使用: 1 首先将UEditor从官网下载 ...

  8. 百度ueditor的图片上传,前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  9. Ueditor编辑器图片上传到万象优图

    最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...

  10. 百度Ueditor多图片上传控件

    发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面 ...

随机推荐

  1. 优雅关闭服务下线(Jetty)

    在很多时候 kill -9 pid并不是很友好的方法,那样会将我们正在执行请求给断掉,同时eureka 中服务依旧是处于在线状态,这个时候我们可以使用官方提供的actuator来做优雅的关闭处理 - ...

  2. 【Oracle】如何让一个用户能够访问另外一个用户下所有的表

    根据需求的不同,也分为好几种方法,且看下文. 先构造基本的环境:创建两个用户AA,BB,基本需求为用户AA能够访问用户BB下所有的表,即用户AA有对BB下所有的表有"select on&qu ...

  3. HDU 4352 XHXJ's LIS HDU(数位DP)

    HDU 4352 XHXJ's LIS HDU 题目大意 给你L到R区间,和一个数字K,然后让你求L到R区间之内满足最长上升子序列长度为K的数字有多少个 solution 简洁明了的题意总是让人无从下 ...

  4. C#远程连接代码

    /// <summary> /// 服务连接配置类(验证服务账号是否正确) /// </summary> /// <param name="remoteHost ...

  5. es6 模块与commonJS的区别

    在刚接触模块化开发的阶段,我总是容易将export.import.require等语法给弄混,今天索性记个笔记,将ES6 模块知识点理清楚 未接触ES6 模块时,模块开发方案常见的有CommonJS. ...

  6. 午间邂逅 | post 和 get 的兄弟情深

    前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 Github 博客 学习导图: image-20200710142453734 image-202007101431049 ...

  7. Django13 /缓存、信号、django的读写分离

    Django13 /缓存.信号.django的读写分离 目录 Django13 /缓存.信号.django的读写分离 1. 缓存 2. 信号 3. django的读写分离 1. 缓存 缓存简述: 缓存 ...

  8. linux专题(六):Vim编辑器

    http://dwz.date/UDf 什么是Vim编辑器 Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. 简单的来说, vi 是 ...

  9. 接口测试框架实战(三)| JSON 请求与响应断言

    关注公众号,获取测试开发实战干货合辑.本文节选自霍格沃兹<测试开发实战进阶>课程教学内容. 数据驱动就是通过数据的改变驱动自动化测试的执行,最终引起测试结果的改变.简单来说,就是参数化在自 ...

  10. day5:isinstance&代码块&分支&while循环

    1.判断类型 isinstance语法:用法一: isinstance(要判断的值,要判断的类型) 返回True 或者 False用法二: isinstance(要判断的值,(可能的类型1,可能的类型 ...