希望你能帮我解决以下问题。我试图从客户端上传一个约3MB的excel文件到API,首先将文件转换为DataURL,然后将其作为字符串发送。这适用于较小的文件,但不知何故,它似乎阻止了我的较大文件。
当我上传文件时,我收到以下错误。
POST body missing. Did you forget use body-parser middleware?
我已经做了自己的研究,发现更多的人有同样的问题,虽然我找不到解决方案。https://github.com/apollographql/apollo-server/issues/792
这是我在服务器端使用的代码。
import { ApolloServer, gql } from 'apollo-server-micro'
type Props = {
_id: string
file: string[]
}
const typeDefs = gql`
type Mutation {
uploadFile(file: [String!]!): Boolean!
}
type Query {
readUpload(_id: String!): Boolean!
}
`
const resolvers = {
Mutation: {
async uploadFile(_: any, { file }: Props) {
console.log(file)
return true
}
},
Query: {
async readUpload(_: any, { _id }: Props) {
}
}
}
const apolloServer = new ApolloServer({
typeDefs,
resolvers
})
export const config = {
api: {
bodyParser: false
}
}
// Ensure to put a slash as the first character to prevent errors.
export default apolloServer.createHandler({ path: '/api/uploads' })
这是我在客户端使用的代码。
import { useRef } from 'react'
import { uploadFile } from '../graphql/fetchers/uploads'
import { UPLOAD_FILE_QUERY } from '../graphql/queries/uploads'
export default function Upload() {
const inputElement = useRef<HTMLInputElement>(null)
const submitForm = (event: any) => {
event.preventDefault()
const files = inputElement.current?.files
if (files) {
const fileReader = new FileReader()
fileReader.onload = async () => {
try {
const result = fileReader.result as string
try {
console.log(result)
await uploadFile(UPLOAD_FILE_QUERY, { file: result })
} catch(error) {
console.log(error)
}
} catch(error) {
console.log(error)
}
}
fileReader.readAsDataURL(files[0])
}
}
return (
<form>
<input ref={inputElement} type='file'></input>
<button onClick={(event) => submitForm(event)}>Submit</button>
</form>
)
}
3条答案
按热度按时间qxgroojn1#
将bodyParser设置为true
q3qa4bjr2#
设置
bodyParser
大小限制lxkprmvk3#
你尝试在json中以字符串形式发送文件吗?我认为你应该在客户端使用multipart/form数据,并在服务器端使用特殊的中间件解析它们。在客户端特殊链接将请求转换为multipart/formdata完整示例https://github.com/jaydenseric/apollo-upload-examples