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 单图片跨域上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery学习笔记 获取jQuery对象
Sep 19 Javascript
javascript在子页面中函数无法调试问题解决方法
Jan 17 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
jQuery实现的小图列表,大图展示效果幻灯片示例
Oct 25 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
Java设计中的Builder模式的介绍
Mar 22 Javascript
JS实现网站吸顶条
Jan 08 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
Vue路由权限控制解析
Nov 09 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
关于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
回首过去10年中最搞笑的10部动漫,哪一部让你节操尽碎?
2020/03/03 日漫
PHP执行linux系统命令的常用函数使用说明
2010/04/27 PHP
php中将数组存到文件里的实现代码
2012/01/19 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
jquery 可排列的表实现代码
2009/11/13 Javascript
jQuery ctrl+Enter shift+Enter实现代码
2010/02/07 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
jquery基础教程之deferred对象使用方法
2014/01/22 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
浅析JQuery中的html(),text(),val()区别
2014/09/01 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
javascript中new关键字详解
2015/12/14 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
浅谈Python数据类型之间的转换
2016/06/08 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
如何优雅地处理Django中的favicon.ico图标详解
2018/07/05 Python
python实现在函数图像上添加文字和标注的方法
2019/07/08 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
通信工程毕业生求职信
2013/11/16 职场文书
美发活动策划书
2014/01/14 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
战略合作意向书范本
2014/04/01 职场文书
文秘应届生求职信
2014/07/05 职场文书
医院见习总结
2015/06/24 职场文书
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python