微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > web前端 > js教程 > 正文

在VUE + UEditor中如何实现单图片跨域上传功能

亚连
发布： 2018-06-06 17:38:33
原创
3549人浏览过

这篇文章主要介绍了vue + ueditor 单图片跨域上传功能的实现方法，需要的朋友参考下

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

前端：VUE

后端：WAMP + ThinkPHP5.0

前端

立即学习“前端免费学习笔记（深入）”；

http://localhost:8888

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

 

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

 

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

 

后端

Cutout老照片上色
Cutout老照片上色

Cutout.Pro推出的黑白图片上色

Cutout老照片上色 20
查看详情 Cutout老照片上色

http://localhost.server.com

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

 

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

 

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在vue.js中有关vue-fontawesome使用

使用JS添加元素新节点

使用JS获得节点元素的方法

以上就是在VUE + UEditor中如何实现单图片跨域上传功能的详细内容，更多请关注php中文网其它相关文章！

相关标签：
vue

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：怎样操作JQuery元素 下一篇：怎样使用nodeJS模块
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js状态模式是什么 状态模式通过封装对象状态及其行为，使对象在内部状态改变时改变其行为，避免复杂条件判断。上下文（如Light）持有当前状态，并将状态相关操作委托给具体状态对象处理；具体状态（如OnState、OffState）实现各自行为逻辑并可切换状态。示例中灯的开关通过press方法触发不同行为，无需if/else判断。优点包括消除条件逻辑、提升扩展性与职责清晰，适用于多状态场景如订单流程、按钮状态、游戏角色动作等，增强代码可维护性与灵活性。
2025-11-06 01:09:27
648
js外观模式的介绍 外观模式是通过创建高层接口简化复杂系统调用的设计模式。它封装多个子系统操作，如将事件绑定、数据加载和DOM渲染整合为一个初始化方法，使客户端无需了解内部细节，仅通过统一接口（如pageInitFacade.init()）即可完成调用，从而降低使用复杂度、实现解耦并提升可维护性，常用于浏览器兼容处理、多API组合调用等场景。
2025-11-06 00:33:10
430
JavaScript如何使用模板字符串_JavaScript模板字符串语法与嵌入变量方法 模板字符串使用反引号定义，支持多行文本和嵌入变量，通过${}插入变量或表达式，可提升代码可读性与编写效率。
2025-11-06 00:25:36
252
使用Geolocation API获取用户地理位置_javascript技巧 GeolocationAPI可用于获取用户位置，适用于天气、地图等场景；使用时需用户授权且页面运行在HTTPS环境下；通过getCurrentPosition()获取一次位置，watchPosition()持续追踪，并可调用clearWatch()停止监听；需处理权限拒绝、定位不可用、超时等错误情况。
2025-11-05 23:55:02
785
JavaScript 自定义事件：创建与分发自定义 DOM 事件 自定义事件通过CustomEvent创建，配合dispatchEvent分发和addEventListener监听，实现组件间解耦通信。1.使用newCustomEvent(‘name’,{bubbles,cancelable,detail})定义事件；2.调用element.dispatchEvent(event)触发；3.用addEventListener(‘name’,handler)接收，可跨组件传递数据，适用于表单验证等场景。
2025-11-05 23:54:02
782
现代JavaScript模块化开发实践与演进 JavaScript模块化从早期全局污染问题演进到ESModules标准，历经IIFE、CommonJS、AMD等方案，最终通过import/export实现静态分析、循环引用处理及跨平台支持，结合Webpack、Vite等工具优化开发流程，成为现代前端工程化核心基础。
2025-11-05 23:53:02
539
JS如何创建闭包_JavaScript闭包概念与实际应用场景方法详解 闭包是函数访问并记住外部作用域变量的机制，如示例中inner函数持续访问outer的count变量，实现私有状态；常用于创建私有变量、模块化编程和事件处理中的上下文保存，但需注意内存占用与泄漏问题。
2025-11-05 23:52:02
864
JavaScript实现下拉菜单联动：高效同步互斥选项 本教程详细讲解如何使用JavaScript实现两个下拉菜单（元素）的联动效果，特别是在需要它们显示互斥或相反选项的场景。通过事件委托和索引同步，我们将展示一个健壮且易于扩展的解决方案，确保用户在一个下拉菜单中做出选择时，另一个下拉菜单能自动更新到对应的相反选项，例如在语言翻译器中实现源语言和目标语言的自动切换。
2025-11-05 23:50:01
286
JS注解如何使用_ JS注解的实际使用场景与操作步骤 JS无原生注解，但可通过JSDoc添加类型文档、装饰器实现元数据标记，或在TypeScript中模拟注解功能，用于类型提示、框架集成与AOP编程。
2025-11-05 23:49:02
940
前端路由原理与hash、history模式实现_javascript单页应用 单页应用无刷新跳转的核心是前端路由，通过监听URL变化并动态更新视图实现。主要采用hash模式和history模式：hash模式利用#后的锚点变化触发hashchange事件，兼容性好且无需后端配合；history模式使用pushState和popstate实现更美观的URL路径，需后端支持避免404。前者适合快速开发，后者提升用户体验与SEO，技术选型应根据项目需求与部署环境决定。
2025-11-05 23:47:28
501
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部