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

Posted 2023-03-08

【中文标题】如何将图片从 TinyMCE 上传到 Apollo GraphQL 服务器？

【英文标题】：How does one upload an image from TinyMCE to an Apollo GraphQL server?

【发布时间】：2020-06-21 11:20:23

【问题描述】：

我为 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 上传过任何图片。

【参考方案1】：

我也从未使用过这个...但我会尝试使用file_picker_callback。

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

同样调整配置为in this answer

【讨论】：

我的印象是“file_picker_callback”只是用来自定义文件选择器对话框本身。不应该使用images_upload_handler (tiny.cloud/docs/configure/file-image-upload/…) 来代替吗？我的想法是，如果有人使用file_picker_callback 上传图片，如果这只是自定义文件选择器对话框，它会继续尝试使用默认值上传图片。

@Cerulean 可用于其他文件处理（例如处理/解析文本文件，将提取的数据插入文本、表格等），而不仅仅是上传。如果回调调用的编辑器插入图像对象 - 进一步的默认处理 - 当然不是强制性的。恕我直言，通过覆盖file_picker_callback，您可以替换/自定义处理链的更大切片（包含默认的images_upload_handler 调用）。您也可以使用文件，而不是 blob。

我可以弄清楚如何使用上述处理程序之一上传图像，但 TinyMCE 期望服务器返回一个对象，location:'path to file', where location` 是填充在对话框选择器的文件名中。但是，我认为 GraphQL 会返回包含在“数据”中的所有内容。有什么办法可以解决 GraphQL 返回的结果与 TinyMCE 所期望的不同的事实吗？我查看了file_picker_callback，但我看不到任何地方可以自定义它。

return location: data.filename ; ? filename 是突变结果属性，如果需要，添加主机/完整路径