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 学习 几种常用方法
Jun 11 Javascript
用document.documentElement取代document.body的原因分析
Nov 12 Javascript
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
纯javascript制作日历控件
Jul 17 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
Aug 03 Javascript
vue cli构建的项目中请求代理与项目打包问题
Feb 26 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
vue路由切换时取消之前的所有请求操作
Sep 01 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实现图片简单上传
2006/10/09 PHP
在PHP中使用模板的方法
2008/05/24 PHP
php 在文件指定行插入数据的代码
2010/05/08 PHP
作为PHP程序员应该了解MongoDB的五件事
2013/06/03 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
php cookie 详解使用实例
2016/11/03 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
JavaScript实现点击按钮就复制当前网址
2015/12/14 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
2017/07/12 jQuery
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Python3实现Web网页图片下载
2016/01/28 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python中append实例用法总结
2019/07/30 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
Python PyInstaller库基本使用方法分析
2019/12/12 Python
简述python Scrapy框架
2020/08/17 Python
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
一份Java笔试题
2012/02/21 面试题
求职推荐信
2013/10/28 职场文书
工程专业毕业生自荐信范文
2013/12/25 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
三年级学生期末评语
2014/12/26 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
初一年级组工作总结
2015/08/12 职场文书
礼仪培训心得体会
2016/01/22 职场文书
SQL Server中的逻辑函数介绍
2022/05/25 SQL Server