未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

前端:VUE

后端:WAMP + Thinphp5.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 单图片跨域上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


您可能感兴趣的文章:使用vue构建一个上传图片表单vue.js 上传图片实例代码基于VUE选择上传图片并页面显示(图片可删除)基于vue+ bootstrap实现图片上传图片展示功能require.js+vue开发微信上传图片组件

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: PHPVU服务器微信数据谢大删除
tags: 图片,上传,UEditor,vue,VUE,JSON,跨域,js,后端,页面,ueditor,localhost,官网,PHP,http
分页:12
转载请注明
本文标题:VUE + UEditor 单图片跨域上传功能的实现方法
本站链接:https://www.codesec.net/view/572591.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(116)