上傳圖片到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({ ... })
  ...
});