graphql - 如何将图像从 TinyMCE 上传到 Apollo GraphQL 服务器？

Question

我已经为 KeystoneJS 的 AdminUI 编写了一个自定义字段，它使用了 TinyMCE 的编辑器。

KeystoneJS 在其下运行一个 Apollo GraphQL 服务器并且 auto-generates mutations and queries based on your CMS schema . TinyMCE 有 capability to enter custom hooks to upload images .

我希望能够连接这两者——使用 GraphQL 突变将图像从 TinyMCE 上传到 KeystoneJS 的服务器。

例如，在我的设置中，我在 CMS 中有一个 Image 字段。 KeystoneJS 有一个 GraphQL 突变，允许我上传图像

createImage(data: ImageCreateInput): Image

imageCreateInput是

type ImageCreateInput {file: Upload}

This tutorial解释了如何将图像从 Apollo 客户端上传到 Apollo 服务器(KeystoneJS 正在运行)。

const UPLOAD_MUTATION = gql`
  mutation submit($file: Upload!) {
    submitAFile(file: $file) {
      filename
      mimetype
      filesize
    }
  }
`;

 return (
    <form>
      <Mutation mutation={UPLOAD_MUTATION} update={mutationComplete}>
        {mutation => (
          <input
            type="file"
            onChange={e => {
              const [file] = e.target.files;
              mutation({
                variables: {
                  file
                }
              });
            }}
          />
        )}
      </Mutation>
    </form>
  );

对于如何将它集成到 TinyMCE 中，我有点困惑，特别是因为该示例基于使用表单，而 TinyMCE 向我发送编码的数据——据我所知——Base64。

TinyMCE 让我有机会指定 custom upload handler :

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  images_upload_handler: function (blobInfo, success, failure) {
    var xhr, formData;

    xhr = new XMLHttpRequest();
    xhr.withCredentials = false;
    xhr.open('POST', 'postAcceptor.php');

    xhr.onload = function() {
      var json;

      if (xhr.status != 200) {
        failure('HTTP Error: ' + xhr.status);
        return;
      }

      json = JSON.parse(xhr.responseText);

      if (!json || typeof json.location != 'string') {
        failure('Invalid JSON: ' + xhr.responseText);
        return;
      }

      success(json.location);
    };

    formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());

    xhr.send(formData);
  }
});

TinyMCE 似乎为我提供了一个 blob，据我所知，Apollo Client 需要一个文件名。我只使用 blobInfo.filename 吗？有没有更好的方法将 TinyMCE 图像上传到 GraphQL Apollo 服务器？

我以前从未用 TinyMCE 上传过任何图片。

Answer 1

我也从来没有用过这个...但我会尝试使用 file_picker_callback .

在此demo您可以看到 files[0] - 我很确定您可以在此处插入一个以 file 作为参数的上传突变调用。结果(url)传递给 cb()(如示例所示)。

同时调整配置为in this answer