将图像上传到 GraphQL 服务器

Question

我正在使用 react-dropzone and graphql-server-express-upload to upload an image all in GraphQL Apollo. In my client the file looks like this:

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

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

我正在按照 graphql-server-express-upload 中的自述文件中的说明进行操作，但到目前为止运气不佳。如何获取完整图片？

Answer 1

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

Answer 2

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

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 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({ ... })
  ...
});

将图像上传到 GraphQL 服务器

Upload image to GraphQL server

javascript

node.js

reactjs

graphql

react-apollo