vue3+ckeditor5:自定义上传图片

废话不多说，直接放代码

//ckeditor5配置
const ckEditor = () => {
  ClassicEditor.create(document.querySelector("#editor"), {
    //配置
  ......
    image: {
      toolbar: [
        "imageTextAlternative",
        "imageStyle:full",
        "imageStyle:side",
        "imageStyle:alignLeft",
        "imageStyle:alignCenter",
        "imageStyle:alignRight",
      ],
      styles: ["full", "side", "alignLeft", "alignCenter", "alignRight"],
    }
  })
    .then((editor) => {
      // console.log("创建成功");
      //图片上传自定义重点代码
      editor.plugins.get("FileRepository").createUploadAdapter = (loader) => {
        // Configure the URL to the upload script in your back-end here!
        return new MyUploadAdapter(loader);
      };
      content = editor;
    })
    .catch((error) => {
      console.error(error);
    });
};

export default class MyUploadAdapter {
    constructor(loader) {
      // The file loader instance to use during the upload.
      this.loader = loader;
    }
    upload() {
      return this.loader.file.then(
        (file) =>
          new Promise((resolve, reject) => {
            this.uploadFile(file, resolve);
          })
      );
    }

    uploadFile(file, resolve) {
      // 上传文件
      var formdata = new FormData();
      //new 这部分根据个人实际情况发生请求获取url
      new Promise((resolve) => {
        resolve(
          dataAdd({
            appid: "test",
            defineid: "11",
          })
        );
      }).then(async (res) => {
        let row = JSON.parse(res);
        formdata.append("file", await file)
        axios({
          url: url,
          method: "post",
          data: formdata,
        }).then((res) => {
          // console.log(res);
          resolve({
            default: res.data.data//根据后端返回格式
          }) ;
        });
      });
    }
    // Starts the upload process.

    abort() {
      // Reject the promise returned from the upload() method.
      server.abortUpload();
    }
  }