如何將圖像從 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 編碼的數據——據我所知——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 Client 需要一個文件名。 我只使用blobInfo.filename嗎？ 有沒有更好的方法將 TinyMCE 圖像上傳到 GraphQL Apollo 服務器？

我以前從未用 TinyMCE 上傳過任何圖片。

Answer 1

我也從未使用過這個......但我會嘗試使用file_picker_callback 。

在這個演示中，您可以看到files[0] - 我很確定您可以在此處插入一個以file為參數的上傳突變調用。 結果 (url) 傳遞給cb() （如示例所示）。

還調整配置，如本答案