vue“欺骗”ueditor,实现图片上传
一、环境介绍
@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
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,实现图片上传的更多相关文章
- uEditor独立图片上传
项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...
- 在SAE上使用Ueditor的图片上传功能
SAE上是没有文件夹读写权限的,所以要在SAE使用Ueditor的图片上传功能须要借助SAE的Storage服务. 一.开通Storage服务 在SAE控制台开通Storage服务,并新增一个doma ...
- springboot整合ueditor实现图片上传和文件上传功能
springboot整合ueditor实现图片上传和文件上传功能 写在前面: 在阅读本篇之前,请先按照我的这篇随笔完成对ueditor的前期配置工作: springboot+layui 整合百度富文本 ...
- 对百度的UEditor多图片上传的一些补充
我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...
- 单独调用Ueditor的图片上传功能
<!DOCTYPE html> <html> <head> <title></title> <script src="/sc ...
- asp.net 百度编辑器 UEditor 上传图片 图片上传配置 编辑器配置 网络连接错误,请检查配置后重试
1.配置ueditor/editor_config.js文件,将 //图片上传配置区 ,imageUrl:URL+"net/imageUp.ashx" //图片上传提交地址 ,im ...
- UEditor使用------图片上传与springMVC集成 完整实例
UEditor是一个很强大的在线编辑软件 ,首先讲一下 基本的配置使用 ,如果已经会的同学可以直接跳过此节 ,今天篇文章重点说图片上传; 一 富文本的初始化使用: 1 首先将UEditor从官网下载 ...
- 百度ueditor的图片上传,前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
- Ueditor编辑器图片上传到万象优图
最近想用typecho做一个个人博客站,typecho的文本编辑器不能上传图片,我就用Ueditor替换的了原来的文本编辑器,听说腾讯的万象优图每月有50G的免费空间和流量,我就自己改了下Uedito ...
- 百度Ueditor多图片上传控件
发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面 ...
随机推荐
- 优雅关闭服务下线(Jetty)
在很多时候 kill -9 pid并不是很友好的方法,那样会将我们正在执行请求给断掉,同时eureka 中服务依旧是处于在线状态,这个时候我们可以使用官方提供的actuator来做优雅的关闭处理 - ...
- 【Oracle】如何让一个用户能够访问另外一个用户下所有的表
根据需求的不同,也分为好几种方法,且看下文. 先构造基本的环境:创建两个用户AA,BB,基本需求为用户AA能够访问用户BB下所有的表,即用户AA有对BB下所有的表有"select on&qu ...
- HDU 4352 XHXJ's LIS HDU(数位DP)
HDU 4352 XHXJ's LIS HDU 题目大意 给你L到R区间,和一个数字K,然后让你求L到R区间之内满足最长上升子序列长度为K的数字有多少个 solution 简洁明了的题意总是让人无从下 ...
- C#远程连接代码
/// <summary> /// 服务连接配置类(验证服务账号是否正确) /// </summary> /// <param name="remoteHost ...
- es6 模块与commonJS的区别
在刚接触模块化开发的阶段,我总是容易将export.import.require等语法给弄混,今天索性记个笔记,将ES6 模块知识点理清楚 未接触ES6 模块时,模块开发方案常见的有CommonJS. ...
- 午间邂逅 | post 和 get 的兄弟情深
前言 本文已经收录到我的 Github 个人博客,欢迎大佬们光临寒舍: 我的 Github 博客 学习导图: image-20200710142453734 image-202007101431049 ...
- Django13 /缓存、信号、django的读写分离
Django13 /缓存.信号.django的读写分离 目录 Django13 /缓存.信号.django的读写分离 1. 缓存 2. 信号 3. django的读写分离 1. 缓存 缓存简述: 缓存 ...
- linux专题(六):Vim编辑器
http://dwz.date/UDf 什么是Vim编辑器 Vim是从 vi 发展出来的一个文本编辑器.代码补完.编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用. 简单的来说, vi 是 ...
- 接口测试框架实战(三)| JSON 请求与响应断言
关注公众号,获取测试开发实战干货合辑.本文节选自霍格沃兹<测试开发实战进阶>课程教学内容. 数据驱动就是通过数据的改变驱动自动化测试的执行,最终引起测试结果的改变.简单来说,就是参数化在自 ...
- day5:isinstance&代码块&分支&while循环
1.判断类型 isinstance语法:用法一: isinstance(要判断的值,要判断的类型) 返回True 或者 False用法二: isinstance(要判断的值,(可能的类型1,可能的类型 ...