编程 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表单常用验证集合

Jan 16 Javascript

img标签中onerror用法

Aug 13 Javascript

js的逻辑运算符 ||

May 31 Javascript

理解Javascript_02_理解undefined和null

Oct 11 Javascript

Js冒泡事件详解及阻止示例

Mar 21 Javascript

jQuery文件上传插件Uploadify使用指南

Jun 05 Javascript

JS组件Bootstrap按钮组与下拉按钮详解

May 10 Javascript

Bootstrap Paginator分页插件使用方法详解

May 30 Javascript

深入理解vue.js双向绑定的实现原理

Dec 05 Javascript

防止重复发送 Ajax 请求

Feb 15 Javascript

vue组件中使用iframe元素的示例代码

Dec 13 Javascript

vue组件实践之可搜索下拉框功能

Nov 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添加Xdebug扩展的方法

2014/02/12 PHP

php求两个目录的相对路径示例(php获取相对路径)

2014/03/27 PHP

php实现插入数组但不影响原有顺序的方法

2015/03/27 PHP

PHP pthreads v3使用中的一些坑和注意点分析

2020/02/21 PHP

jQuery.ajax 用户登录验证代码

2010/10/29 Javascript

你的 mixin 真的兼容 ECMAScript 5 吗?

2013/04/11 Javascript

js将控件隐藏的方法及display属性介绍

2013/07/04 Javascript

JavaScript操作HTML元素和样式的方法详解

2015/10/21 Javascript

JS功能代码集锦

2016/05/04 Javascript

js获取当前时间(昨天、今天、明天)

2016/11/23 Javascript

完美解决JS文件页面加载时的阻塞问题

2016/12/18 Javascript

html5+CSS 实现禁止IOS长按复制粘贴功能

2016/12/28 Javascript

JS实现浏览器打印、打印预览示例

2017/02/28 Javascript

JS实现的添加弹出层并完成锁屏操作示例

2017/04/07 Javascript

JavaScript正则表达式校验与递归函数实际应用实例解析

2017/08/04 Javascript

Vue.set 全局操作简单示例

2019/09/19 Javascript

vue-cli和v-charts实现可视化图表过程解析

2019/10/08 Javascript

python输出当前目录下index.html文件路径的方法

2015/04/28 Python

python中的字典使用分享

2016/07/31 Python

Python内置函数—vars的具体使用方法

2017/12/04 Python

python增加矩阵维度的实例讲解

2018/04/04 Python

Python读取Excel表格,并同时画折线图和柱状图的方法

2018/10/14 Python

分享Python切分字符串的一个不错方法

2018/12/14 Python

python编写俄罗斯方块

2020/03/13 Python

Python 忽略文件名编码的方法

2020/08/01 Python

python 读取、写入txt文件的示例

2020/09/27 Python

Html5实现文件异步上传功能

2017/05/19 HTML / CSS

美国网上订购鲜花：FTD

2016/09/23 全球购物

Priority Pass机场贵宾室会籍计划：全球超过1200间机场贵宾室

2018/08/26 全球购物

Prototype如何为一个Ajax添加一个参数

2015/12/06 面试题

银行开业庆典方案

2014/02/06 职场文书

高等学院职业生涯规划书范文

2014/09/16 职场文书

会议室使用管理制度

2015/08/06 职场文书

家庭聚会祝酒词

2015/08/11 职场文书

《珍珠鸟》教学反思

2016/02/16 职场文书

婚礼必备主持词范本！

2019/07/23 职场文书