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

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

KeystoneJS在下面和下面运行Apollo GraphQL服务器。TinyMCE拥有最强大的力量

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

例如，在我的设置中，CMS中有一个

图像

字段。KeystoneJS有一个GraphQL变体，可以让我上传一个图像

createImage(data: ImageCreateInput): Image

其中

imageCreateInput

为

type ImageCreateInput {file: Upload}

解释了如何将图像从Apollo客户端上传到Apollo服务器（KeystoneJS正在运行）

TinyMCE似乎为我提供了一个blob，而据我所知，Apollo客户端需要一个文件名。我是否只使用

blobInfo.filename

？有没有更好的方法将TinyMCE图像上传到GraphQL Apollo服务器

---

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

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

在这里，您可以看到

文件[0]

——我很确定您可以在这里插入一个带有

文件

作为参数的上传变异调用。结果（url）传递到

cb（）

（如示例所示）

---

还可以调整配置，因为

我觉得“文件选择器回调”只是用来定制文件选择器对话框本身。人们是否应该使用

图像上传处理程序
（）？我的想法是，如果一个人使用
文件选取器\u回调
上传图像，如果这只是为了自定义文件选取器对话框，它将继续并尝试使用默认值上传图像。@Cerulean它可以用于其他文件处理（例如，处理/解析文本文件，将提取的数据插入文本、表格等），不只是上传。如果调用回调，编辑器将插入图像对象-进一步的默认处理-当然不是强制性的。IMHO通过覆盖
文件\u选取器\u回调
可以替换/自定义处理链的较大切片（包含默认
图像\u上载\u处理程序
调用）。您也可以使用file，而不是blob。我可以通过上面的一个处理程序了解如何上载图像，但TinyMCE希望服务器返回一个对象，
{location:'path to file'}，其中
location`是填充对话框选择器文件名的内容。然而，我认为GraphQL会返回所有包装在“数据”中的内容。GraphQL返回的结果与TinyMCE期望的结果不同，这一事实有什么解决办法吗？我查看了
file\u picker\u callback
，但是我看不到任何地方可以自定义它<代码>文件名
是一个变异结果属性，如果需要，请添加主机/完整路径
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.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);
  }
});