vue使用kindeditor富文本編輯器上傳圖片時跨域解決

當我們使用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的代碼

 <editor ref="editor" id="editor_id" height="300px" width="100%" :content.sync="editorText"
                :afterChange="afterChange()"
              cssPath ='../../static/kindeditor/plugins/code/prettify.css'
              uploadJson="http://192.168.100.157:8080/fileUpload"
              :loadStyleMode="true"
              :allowFileManager="true"
              @on-content-change="onContentChange"></editor>

接下來就是後臺需要配合，發起上傳請求的時候，重定向到我們前端的redirect文件就可以，後臺配合請參考https://my.oschina.net/u/3774949/blog/3111248

可以參考一下這位好心人的  https://www.jianshu.com/p/27e9ed4e7ff8