上传图片到GraphQL服务器

Question

我正在使用react-dropzone和graphql-server-express-upload在 GraphQL Apollo 中上传图像。 在我的客户中，文件如下所示：

但是在服务器中，当我登录它时，它看起来像这样：

{ preview: 'blob:http://localhost:3000/c622b0bd-3f0d-4f52-91f4-7676c8534c59' }

我正在按照graphql-server-express-upload的自述文件中的说明进行操作，但到目前为止还没有成功。 我如何获得完整图像？

Answer 1

另一种方法是在上载之前将二进制映像转换为客户端的BASE64，然后将图像填充为作为突变参数传递的GraphQLInputObjectType上的BASE64字符串。 然后，在服务器上，该字段可以简单地保存在数据库列中。 例如：

const UserInputType = new GraphQLInputObjectType({
  name: 'UserInput',
  description: 'The user of our system',

  fields: () => ({
    username: {
        type: GraphQLString,
        description: 'Name of the user'
    },
    image: {
        type: GraphQLString,
        description: 'Image of the user'
    }
  })
});

Answer 2

我最终使用apollo-upload-client ，效果很好！

Answer 3

这是一个使用apollo-upload-client的例子。

const UPLOAD_IMAGE = gql`
    mutation ($input: SetUploadImage!) {
        uploadImage(input: $input) {
            clientMutationId
        }
    }
`;

 const Photo = ({ id }) => {
     const [ mutate ] = useMutation(UPLOAD_IMAGE);
    
     function onChange({target: { validity, files: [file] }}) {
         if (validity.valid) {
             mutate({
                 variables: {
                     input: {
                         id,
                         params: {
                             image: file
                         }
                     }
                 }
             });
         }
      }
    
      return (
        <div css={style}>
          <input type="file" required onChange={onChange} />
        </div>
      )
}

请注意，为了使其正常工作，您需要在 Apollo Client 构造函数上设置上传连接。

const CLIENT = new ApolloClient({
  link: new createUploadLink({ ... })
  ...
});