vue使用kindeditor富文本编辑器上传图片时跨域解决

红太狼 2021-08-13 12:51 1030阅读 0赞

当我们使用kindeditor富文本编辑器的时候会出现iframe跨域问题

可以通过重定向来解决

第一步：先在项目中创建一个redirect的vue组件

<template>
          <div class="redirect">
    
          </div>
    </template>
    
    <script>
        export default {
            name: "redirect",
          data(){
              return{
                dataObjectUrl:''
              }
          },
          created(){
              this.upload_callback();
          },
          methods:{
            getParameter() {
              // 获取到重定向发送过来的信息
              var uri = decodeURI(window.location.search);
              //有%3A之类的乱码，需要用正则处理一下
              uri = uri.replace(/%3A/g, ":").replace(/%2F/g, "/").replace(/%3F/g, "?").replace(/%3D/g, "=").replace(/%26/g, "&");
              //具体对数据的处理，看后台传过来的类型，最后得到一个json就可以，其中有两个属性，成功的时候，一个error,一个url
              return uri.length > 5 ? JSON.parse(uri.substring(3)) : null
            },
            upload_callback() {
              var obj = this.getParameter();
              var dataObject;
              // 当error为0的时候，说明上传成功
              if(obj.error == 0){
                dataObject = {"error": obj.error, "url": obj.url};
              }else{
                dataObject = {"error": 1, "message": "错误信息"};
              }
              var data =  JSON.stringify(dataObject)
              //这里是对数据处理之后，走完这个js会回到kindeditor的js中，继续执行，注意如果后台返回了url,但是弹窗提醒是undef，
              // 可能是因为，自己这边传递接受的error的值不是number类型
              // ，为kindeditor源码里面对error的值的判断都是用的全等，值和类型都相等的情况
              document.getElementsByTagName("body")[0].innerHTML = '<pre>' + data + '</pre>';
            },
          }
        }
    </script>
    
    <style scoped>
    
    </style>

调用kindeditor的代码

接下来就是后台需要配合，发起上传请求的时候，重定向到我们前端的redirect文件就可以，后台配合请参考[https://my.oschina.net/u/3774949/blog/3111248][https_my.oschina.net_u_3774949_blog_3111248]

可以参考一下这位好心人的  [https://www.jianshu.com/p/27e9ed4e7ff8][https_www.jianshu.com_p_27e9ed4e7ff8]

[https_my.oschina.net_u_3774949_blog_3111248]: https://my.oschina.net/u/3774949/blog/3111248
[https_www.jianshu.com_p_27e9ed4e7ff8]: https://www.jianshu.com/p/27e9ed4e7ff8