0

以下是响应信息：

"%PDF-1.4\n%����\n2 0 obj\n<>流\nx��X�s�F\u0010�\u0019����$\u0010JaF\u000f\t\t�* :Iw�:�h������-�g/}]�yk��Z\u0002��0V���&��\n��ɐֳ�L\u0012?�4\u000bi����\ u001b�D\u0017\tPقYl���\u0019p\u0010:\-g���Oǜ�F�\u0019�L�&�_c6�'\u0016��cv����fhm�ҏ?; ǴK�U��d\u0007�!����qG{,k�M��\u001e۬�)-�E�GU¢\u0019�\u0003(����q2R�\u001c%K� vC���[�;�j\u0004�E�PO�hH��dk\u0011\fN����騈����\u000fs=8����9\u001fY�\u00185t\u001d��A0Sa ��!\u000e��i\u000f�(1R�q����>�\u0017�i��\u0017<�$��\u0015�;�|/^�;����v̺H\u0019 �1�\t�@��m�?�\u00137q�\u0004�\\u0010ְ'M鸭\u000b���0�9B1�ێ���=�K,Z\"'����\ u0019����3��W\u0010q\u0000A�D�����Hh����\u0017�c�k��̉�i�W\u000b�M ph�P�#��0W:ʥ\u0003�*ӕ�9���\u0015OG��\u000e�$A)>�\u0018H*�R�1 7��~ch\u001a�CUfQ�j�9��+��K��Џ�\u001a{�G��)\f�D\u0012\f���(C\u0005��?ݗ��m�������c��0Ϩ�v@*@Hp�\u0019�Y�!��7�-�\u001b�a�w�3��&�T0q=�K�-ؚ�\u0018\u000e�)����]N�P \u0019ZB.�$w\u0015�\u0006n�&6|

4

1 回答 1

0

嘿，是的，但它需要一些定制工作！

这是使用scaphold.io的方法，但您也可以将其扩展到您自己的实现！

基本上发生的事情是您将文件附加到 multipart/form-data 请求的根级别，然后从 GraphQL 变量中的输入指向请求中文件的键。下面是一些代码，展示了如何使用文件就绪网络接口改造 ApolloClient 实例，然后您可以将其馈送到 Angular2Apollo。

import { createNetworkInterface } from 'apollo-client';

// Create a file-ready ApolloClient instance.
export function makeClientApolloFileHandler() {
  const graphqlUrl = `https://scaphold.io/graphql/my-app`;
  const networkInterface = createNetworkInterface(graphqlUrl);
  networkInterface.query = (request) => {
    const formData = new FormData();

    // Parse out the file and append at root level of form data.
    const varDefs = request.query.definitions[0].variableDefinitions;
    let vars = [];
    if (varDefs && varDefs.length) {
      vars = varDefs.map(def => def.variable.name.value);
    }
    const activeVars = vars.map(v => request.variables[v]);
    const fname = find(activeVars, 'blobFieldName');
    if (fname) {
      const blobFieldName = fname.blobFieldName;
      formData.append(blobFieldName, request.variables[blobFieldName]);
    }

    formData.append('query', printGraphQL(request.query));
    formData.append('variables', JSON.stringify(request.variables || {}));
    formData.append('operationName', JSON.stringify(request.operationName || ''));

    const headers = { Accept: '*/*' };
    if (localStorage.getItem('scaphold_user_token')) {
      headers.Authorization = `Bearer ${localStorage.getItem('scaphold_user_token')}`;
    }

    return fetch(graphqlUrl, {
      headers,
      body: formData,
      method: 'POST',
    }).then(result => result.json());
  };

  const clientFileGraphql = new ApolloClient({
    networkInterface,
    initialState: {},
  });
  return clientFileGraphql;
}

在此函数处理请求后，您可能会拥有如下所示的 FormData（如果它是用 JSON 编码的）：

{
  "query": "mutation CreateFile($input:CreateFileInput) { createFile(input: $input) { ... }",
  "variables": {
    "input": {
      "blobFieldName": "myFile",
      "name": "MyFileName!"
    }
  },
  // Note how the blobFieldName points to this key
  "myFile": <Buffer of file data in multipart/form-data>
}

然后，服务器需要了解如何解释这一点，以便在有效负载中查找文件并将其与正确的对象等相关联。

希望这可以帮助！

于 2017-01-12T01:19:10.047 回答