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

Question

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

KeystoneJS在下面运行Apollo GraphQL服务器，并根据CMS模式自动生成变化和查询。TinyMCE具有输入自定义挂钩以上载图像的功能。

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

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

createImage(data: ImageCreateInput): Image

其中imageCreateInput为

type ImageCreateInput {file: Upload}

本教程解释了如何将图像从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为我提供了指定自定义上载处理程序的机会：

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客户端需要一个文件名。我是否只使用blobInfo。文件名？有没有更好的方法将TinyMCE图像上传到GraphQL Apollo服务器？

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

Answer 1

我也从来没有用过这个...但是我会试着用file_picker_callback。

在这个演示中，您可以看到文件[0]-我很确定您可以在这里插入一个带有文件作为参数的上传变异调用。结果（url）传递到cb（）（如示例所示）。

也可以按照此答案调整配置