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

 更新时间:2018年02月08日 11:23:53   作者:丁艳  
这篇文章主要介绍了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。暂时不懂不访问接口用什么方式接收后端数据,如果有好的解决方式欢迎提出。

 

后端

http://localhost.server.com

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

 

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

 

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

总结

以上所述是小编给大家介绍的VUE + UEditor 单图片跨域上传功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue2.0权限树组件实现代码

    Vue2.0权限树组件实现代码

    本文通过实例代码给大家介绍了Vue2.0权限树组件实现代码,需要的的朋友参考下吧
    2017-08-08
  • configureWebpack、chainWebpack配置vue.config.js方式

    configureWebpack、chainWebpack配置vue.config.js方式

    这篇文章主要介绍了configureWebpack、chainWebpack配置vue.config.js方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue项目判断开发、测试、正式环境过程

    Vue项目判断开发、测试、正式环境过程

    这篇文章主要介绍了Vue项目判断开发、测试、正式环境过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue codemirror实现在线代码编译器效果

    vue codemirror实现在线代码编译器效果

    这篇文章主要介绍了vue-codemirror实现在线代码编译器 ,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-12-12
  • vue3基础知识剖析

    vue3基础知识剖析

    笔者这篇文章会从vue3基础的知识点开始剖析,特别是在将composition API的时候,在代码示例中不会一上来就使用setup语法糖,而是用早期的setup函数,这样方便于初学的小伙伴们理解跟学习
    2022-08-08
  • electron-vite新一代electron开发构建工具

    electron-vite新一代electron开发构建工具

    这篇文章主要介绍了electron-vite新一代electron开发构建工具,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 使用ElementUI写一个前端分页查询的实例

    使用ElementUI写一个前端分页查询的实例

    本文主要介绍了使用ElementUI写一个前端分页查询的实例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02
  • Vue.js2.0中的变化小结

    Vue.js2.0中的变化小结

    最近小编在学习vue.js ,发现里面有好多好玩的东东,今天小编给大家分享Vue.js2.0中的变化,小编会在日后给大家持续更新的,感兴趣的朋友参考下吧
    2017-10-10
  • 关于配置babel-plugin-import报错的坑及解决

    关于配置babel-plugin-import报错的坑及解决

    这篇文章主要介绍了关于配置babel-plugin-import报错的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue点击input弹出带搜索键盘并监听该元素的方法

    vue点击input弹出带搜索键盘并监听该元素的方法

    今天小编就为大家分享一篇vue点击input弹出带搜索键盘并监听该元素的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论