我正在尝试使用Angular Apollo作为客户端和Apollo 2.0作为服务器上传文件。
相信我,我尝试了互联网上可以找到的所有教程和示例,但并没有帮助。有一个叫做apollo-upload-file的库,他们给出了一个如何实现它的示例,但在客户端,他们使用了React。虽然我尝试了实现他的示例,但是什么都不起作用。
请帮忙。
我正在尝试使用Angular Apollo作为客户端和Apollo 2.0作为服务器上传文件。
相信我,我尝试了互联网上可以找到的所有教程和示例,但并没有帮助。有一个叫做apollo-upload-file的库,他们给出了一个如何实现它的示例,但在客户端,他们使用了React。虽然我尝试了实现他的示例,但是什么都不起作用。
请帮忙。
在您的模式中,您需要将文件参数定义为类型“Upload”,这是Apollo提供的内置类型。
const { gql } = require('apollo-server');
const TypeDef = gql `
type Mutation {
upload(file: Upload!)
}
`
如果您遇到“类型上传不是一种类型”的错误,您也可以在模式中定义它(我曾经遇到过这个问题)。
const { gql } = require('apollo-server');
const TypeDef = gql `
scalar Upload
type Mutation {
upload(file: Upload!)
}
`
在您的转轮手枪中,您可以访问参数中的文件。需要注意的一点是,该文件将是一个Promise(承诺)。
const resolver = {
Mutation: {
async upload(obj, args, context, info) {
const file = await args.file;
// ... DO STUFF
},
}
}
在客户端中,您需要使用apollo-angular-link-http
包来帮助上传文件。在请求的context
中,您需要设置useMultipart : true
查询将类似于以下内容
const uploadFileMutation = gql`
mutation UploadMutation(
$file: Upload!
) {
upload(file: $file) {
YOUR RESPONSE
}
}
}
`
阿波罗请求的格式如下
constructor(
private Apollo: Apollo
) { }
fileUpload(file){
this.Apollo.mutate<any>({
mutation: uploadFileMutation,
variables: {
file: this.file
},
context: {
useMultipart: true
}
}).subscribe(({ data }) => {
this.response = data.upload
});
}
我希望这可以帮助你,或者至少让你走上正确的轨道。