如何使用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