如何使用GraphQL将图像上传到AWS S3？

Question

我正在上传base64字符串，但GraphQL被挂起。如果我把字符串分割成少于50,000个字符，它就可以工作。在5万个字符之后，graphQL从来不会将其解析为解析函数，但不会给出错误。在较小的字符串上，它工作得很好。

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 }, 
    }, 
}); 

Answer 1

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