如何将图片从 TinyMCE 上传到 Apollo GraphQL 服务器？

Question

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

KeystoneJS 在下面和auto-generates mutations and queries based on your CMS schema 下运行一个 Apollo GraphQL 服务器。 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