编程 Javascript

VUE + UEditor 单图片跨域上传功能的实现方法

Posted in Javascript onFebruary 08, 2018

UEditor官网说不提供单图片的跨域，所以只能自己解决。查了网上的很多方案，但是没看到和vue一起用的，不过倒是获得了一些思路。本着不想改太多源代码的基础上尝试着...一不小心就可以用了解决方案：上传单图片的时后端不直接返回JSON，而是重定向到前端页面

前端：VUE

后端：WAMP + ThinkPHP5.0

前端

http://localhost:8888

1、去官网下载UEditor到vue中，打开ueditor.config.js配置服务器路径(本地域名可以去hosts文件中添加)，下面是我的配置

VUE + UEditor 单图片跨域上传功能的实现方法

2、打开ueditor.all.js查找<input id= 在后面添加标识以便后端判断是否是单图片上传：

VUE + UEditor 单图片跨域上传功能的实现方法

3、创建一个页面展示JSON数据。我直接用路由参数接收返回的结果后再拼接，整个JSON接收不到，所以只好拆开了，没有显示所有的JSON,只获取state和url。暂时不懂不访问接口用什么方式接收后端数据，如果有好的解决方式欢迎提出。

VUE + UEditor 单图片跨域上传功能的实现方法

后端

http://localhost.server.com

1、把UEditor的PHP版本下载下来，里面的PHP文件夹下的文件复制到项目中，在Controller中的输出结果中添加判断，单图片不直接返回结果

VUE + UEditor 单图片跨域上传功能的实现方法

2、Config.json修改访问路径和保存路径

VUE + UEditor 单图片跨域上传功能的实现方法

这样就基本完成了，看看效果单图

VUE + UEditor 单图片跨域上传功能的实现方法

总结

以上所述是小编给大家介绍的VUE + UEditor 单图片跨域上传功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

VUE + UEditor 单图片跨域上传功能的实现方法

- Author -

丁艳

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Javascript Function对象扩展之延时执行函数

Jul 06 Javascript

js、css、img等浏览器缓存问题的2种解决方案

Oct 23 Javascript

浅谈js构造函数的方法与原型prototype

Jul 04 Javascript

深入剖析JavaScript面向对象编程

Jul 12 Javascript

jQuery基本选择器之标签名选择器

Sep 03 Javascript

微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

Nov 22 Javascript

在ES5与ES6环境下处理函数默认参数的实现方法

May 13 Javascript

详解使用create-react-app快速构建React开发环境

May 16 Javascript

vue-router重定向和路由别名的使用讲解

Jan 19 Javascript

JavaScript中的回调函数实例讲解

Jan 27 Javascript

详解JS取出两个数组中的不同或相同元素

Mar 20 Javascript

全面解析js中的原型,原型对象,原型链

Jan 25 Javascript

关于vue中watch检测到不到对象属性的变化的解决方法

Feb 08 #Javascript

使用veloticy-ui生成文字动画效果

Feb 08 #Javascript

js中let和var定义变量的区别

Feb 08 #Javascript

详解Nuxt.js Vue服务端渲染摸索

Feb 08 #Javascript

VUE 使用中踩过的坑

Feb 08 #Javascript

JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例

Feb 08 #Javascript

在vue项目中使用element-ui的Upload上传组件的示例

Feb 08 #Javascript

You might like

php实现天干地支计算器示例

2014/03/14 PHP

PHP中foreach()用法汇总

2015/07/02 PHP

PHP数据库连接mysql与mysqli对比分析

2016/01/04 PHP

PHP简单获取多个checkbox值的方法

2016/06/13 PHP

Javascript的各种节点操作实例演示代码

2012/06/27 Javascript

Javascript 鼠标移动上去小三角形滑块缓慢跟随效果

2013/04/26 Javascript

SuperSlide标签切换、焦点图多种组合插件

2015/03/14 Javascript

JavaScript仿网易选项卡制作代码

2016/10/06 Javascript

微信小程序图片边框解决方法

2017/01/16 Javascript

Vue.js：使用Vue-Router 2实现路由功能介绍

2017/02/22 Javascript

实例详解JavaScript中setTimeout函数的执行顺序

2017/07/12 Javascript

javascript字体颜色控件的开发 JS实现字体控制

2017/11/27 Javascript

分享ES6的7个实用技巧

2018/01/18 Javascript

微信小程序onLaunch异步,首页onLoad先执行?

2018/09/20 Javascript

es6基础学习之解构赋值

2018/12/10 Javascript

jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析

2019/03/06 jQuery

后台使用freeMarker和前端使用vue的方法及遇到的问题

2019/06/13 Javascript

JavaScript缺少insertAfter解决方案

2020/07/03 Javascript

微信小程序轮播图swiper代码详解

2020/12/01 Javascript

[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15

2019/08/17 DOTA

[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08

2020/11/10 DOTA

python实现从字符串中找出字符1的位置以及个数的方法

2014/08/25 Python

解决python 输出是省略号的问题

2018/04/19 Python

一百多行python代码实现抢票助手

2018/09/25 Python

Python作用域与名字空间原理详解

2020/03/21 Python

python使用hdfs3模块对hdfs进行操作详解

2020/06/06 Python

基于django2.2连oracle11g解决版本冲突的问题

2020/07/02 Python

CSS3 新增选择器的实例

2019/11/13 HTML / CSS

化学实验员岗位职责

2013/12/28 职场文书

离婚协议书怎么写的

2014/12/14 职场文书

2015年世界无烟日活动方案

2015/05/04 职场文书

当幸福来敲门英文观后感

2015/06/01 职场文书

浅谈Nginx 中的两种限流方式

2021/03/31 Servers

python opencv检测直线 cv2.HoughLinesP的实现

2021/06/18 Python

CentOS安装Nginx并部署vue

2022/04/12 Servers

pytest实现多进程与多线程运行超好用的插件

2022/07/15 Python