如何使用GraphQL将图像上传到AWS S3?
问题描述:
我正在上传base64字符串,但GraphQL被挂起。如果我把字符串分割成少于50,000个字符,它就可以工作。在5万个字符之后,graphQL从来不会将其解析为解析函数,但不会给出错误。在较小的字符串上,它工作得很好。如何使用GraphQL将图像上传到AWS S3?
const file = e.target.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend =() => {
const imageArray = reader.result;
this.context.fetch('/graphql', {
body: JSON.stringify({
query: `mutation s3Upload($img: String!) {
s3Upload(file: $img) {
logo,
}
}`,
variables: {
img: imageArray,
},
}),
}).then(response => response.json())
.then(({ data }) => {
console.log(data);
});
}
const s3Upload = {
type: S3Type,
args: {
file: { type: new NonNull(StringType) },
},
resolve: (root, args, { user }) => upload(root, args, user),
};
const S3Type = new ObjectType({
name: 'S3',
fields: {
logo: { type: StringType },
},
});
答
AWS的AppSync(https://aws.amazon.com/appsync/)提供了这种已知的,你可以有一个类型的S3对象,并输入“复杂对象”功能:
type S3Object {
bucket: String!
key: String!
region: String!
}
input S3ObjectInput {
bucket: String!
key: String!
region: String!
localUri: String
mimeType: String
}
然后,您可以做这样的事情来定义这个对象作为另一种类型的一部分:
type UserProfile {
id: ID!
name: String
file: S3Object
}
,然后指定一个突变添加:
type Mutation {
addUser(id: ID! name: String file: S3ObjectInput): UserProfile!
}
你的客户端操作需要指定相应的水桶,键(与文件扩展名),区域等
这里更多:https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-react.html#complex-objects
谢谢@Richard。您引用的教程不会显示如何更改'NewPostMutation.js'。我试图按照这个教程,但到目前为止没有运气让一个文件上传在s3上:-( – SaidAkh