将图片上传到GraphQL服务器

Question

我正在使用 react-dropzone 和 graphql-server-express-upload 来上传一张图片，全部在GraphQL Apollo中进行。在我的客户端上，文件看起来像这样: 但是在服务器端，当我记录它时，它看起来像这样:

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

我正在按照 graphql-server-express-upload 自述文件中的指示操作，但是迄今为止没有成功。如何获取完整的图像？

- Vlady Veselinov

---

为什么不使用静态rest路由来上传，捕获那个rest路由的响应filepath，并将filepath的响应更新到数据库中，并在用户查询时从路径中获取图像。 - parwatcodes

Answer 1

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

- Vlady Veselinov

---

你能否提供你的代码或GitHub链接？将不胜感激！我发现很少有相关代码。谢谢！ - Kevin Danikowski

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'
    }
  })
});

- leoncc

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

- Andrew