Apollo-Server-Express没有收到上传对象

我正在尝试使用apollo-server-express和apollo-client上传文件。但是,当文件对象传递到解析器时,它始终为空。我可以在客户端看到文件,但是在服务器端看不到。我该如何解决?

我的模式

  type File {
    id: ID
    path: String
    filename: String
    mimetype: String
  }

  extend type Query {
    getFiles: [File]
  }

  extend type Mutation {
    uploadSingleFile(file: Upload!): File
  }

我的解析器

  Mutation: {

    uploadSingleFile: combineResolvers(
      isAuthenticated,async (parent,{ file },{ models,user,storeUpload },info) => {
        console.log('Resolver-> uploadSingleFile')
        console.log(file) // Will return empty,{ }
        const x = await file
        console.log(x) // Will also return empty,{ }
        const storedFile = storeUpload(file)
        return storedFile
      }
    ),},

我的客户端查询文件

export const UPLOAD_SINGLE_FILE = gql`
  mutation uploadSingleFile($file: Upload!) {
    uploadSingleFile(file: $file) {
      id
    }
  }
`

我的客户端界面

import React from 'react'

// GQL
import { useApolloClient,useMutation } from '@apollo/react-hooks'
import { UPLOAD_SINGLE_FILE } from '../../queries'

const FileUpload = props => {

  const [uploadSingleFile,uploadSingleFileResult] = useMutation(UPLOAD_SINGLE_FILE,{
    onCompleted(uploadSingleFile) {
      console.log('Completed uploadSingleFile')
    }
  })

  const apolloClient = useApolloClient()

  const handleUploadFile = ({
    target: {
      validity,files: [file]
    }
  }) => {
    console.log('Uploading file...')
    if(validity.valid) {
      console.log('Valid')
      console.log(file.name)
      uploadSingleFile({ variables: { file } })
      .then(() => {
        apolloClient.resetStore()
      })
    }
    else console.log('Invalid file')      
  }

  return(
        <input type="file" required onChange={handleUploadFile} />
  )
}

export default FileUpload

已更新

我的前端设置是:

const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql',})

const authLink = setContext((_,{ headers }) => {
  const token = localStorage.getItem('token')
  return {
    headers: {
      ...headers,authorization: token ? `Bearer ${token}` : "",}
  }
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),cache: new InmemoryCache(),})
zhenhuang1980 回答:Apollo-Server-Express没有收到上传对象

您需要在Apollo Client中使用适当的Link才能启用文件上传。最简单的方法是使用apollo-upload-client中的createUploadLink。它可以作为createHttpLink的替代产品,因此只需换出功能,您就可以使用了。

const httpLink = createUploadLink({
  uri: 'http://localhost:4000/graphql',})
const authLink = ...
const client = new ApolloClient({
  link: authLink.concat(httpLink),cache: new InMemoryCache(),})
,

假设您已设置并使用了正确的链接(使用Daniel在其帖子中提到的createUploadLink),一旦在服务器上的解析器中等待file的道具,您就应该能够对其进行解构。

const { filename,mimetype,createReadStream } = await file;
console.log(filename,mimetype);

// to get a stream to use of the data
const stream = createReadStream();
本文链接:https://www.f2er.com/3135761.html

大家都在问