vue + ckeditor5 图片上传

需求：调用接口上传得时候必须带Authorization，否则会被接口直接拒绝访问

1. 尝试用ckfinder加headers,但是都没起作用

注意 当前url必须是公网可访问地址

   ckfinder: {
     // 图片上传地址 
     // 返回参要求{"uploaded":1,"url":"/"}，否则不能正常回显
     uploadUrl: uploadUrl,
   },  

2. 使用图片自定义loader

import axios from 'axios';

export default class UploadAdapter {
 constructor(loader) {
   // Save Loader instance to update upload progress.
   this.loader = loader;
   // this.loader.file.then(data => {
   //   this.file = data
   //   data.append("upload", this.loader.file)
   // })
 }

 async upload() {
   const data = new FormData();
   data.append('typeOption', 'upload_image');
   data.append('file', await this.loader.file); 
   //这个地方一定要加await,否则上传得图片一直都是空的

   return new Promise((resolve, reject) => {
     axios({
       url: `url`,
       method: 'post',
       data,
       headers: {
         'Authorization': sessionStorage.getItem("Authorization")
       },
       withCredentials: true
     }).then(res => {
      // 自定义接口返回参数,
       resolve({
         'uploaded': 0,
         'default': res.data
       });
     }).catch(error => {
       console.log(error)
       reject(error)
     });
   });
 }

 abort() {
   // Reject promise returned from upload() method.
 }
}

3. 在使用编辑器页面导入，使用

import MyUploadAdapter from "./UploadAdapter";

 onReady(editor) {
    
  // 上传图片,使用自定义loader
  editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader);
  };
},