为CKEditor 5配置GraphQL后端图片上传适配器遇TypeError问题

错误原因 #

你代码里的核心问题有两个：

• 构造函数里直接调用client.mutate()，这个方法返回的是Promise对象，不是useMutation那种包含执行函数的数组，所以解构出来的addPost是undefined，调用时自然触发TypeError: undefined is not a function。
• 构造阶段就执行mutation，会导致页面一加载就发起无意义的请求，完全不符合“选中图片后再上传”的逻辑。

修正后的代码 #

import client from 'GraphQl/apolloClient'
import { ADD_POST_IMAGE } from 'GraphQl/News/Mutations'

function MyCustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return new MyUploadAdapter(loader)
  }
}

class MyUploadAdapter {
  constructor(loader) {
    this.loader = loader // 直接接收FileLoader实例
  }

  // 启动上传流程
  upload() {
    return new Promise(async (resolve, reject) => {
      try {
        await this._sendRequest(resolve, reject)
      } catch (err) {
        reject(err)
      }
    })
  }

  // 准备数据并发起请求
  async _sendRequest(resolve, reject) {
    // 先获取用户选中的文件
    const file = await this.loader.file

    try {
      // 按需发起GraphQL mutation
      const { data } = await client.mutate({
        mutation: ADD_POST_IMAGE,
        variables: { data: { image: file } },
        // 如果后端需要FormData格式，这里要把文件包装成FormData并设置请求头
        // context: {
        //   headers: { 'Content-Type': 'multipart/form-data' }
        // }
      })

      // 通知CKEditor上传成功，返回图片URL等信息
      resolve({
        default: data.addPostImage.url // 替换成你后端返回的图片地址字段
      })
    } catch (error) {
      // 通知CKEditor上传失败
      reject(error.message || '图片上传失败')
    }
  }
}

export default MyCustomUploadAdapterPlugin

关键修改点 #

• 移除了构造函数中提前执行的mutation，改为在_sendRequest里拿到文件后再发起请求。
• 利用await直接处理loader.file的Promise，避免嵌套then回调。
• 完善了upload方法的Promise逻辑，通过resolve和reject给CKEditor返回明确的上传状态，这样编辑器才能正确显示图片或错误提示。
• 如果你的GraphQL后端需要接收FormData格式的文件，记得在client.mutate的context里设置对应的请求头（代码中已注释示例）。

内容的提问来源于stack exchange，提问作者Ishak Rai