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

Question

我正在上传base64字符串，但GraphQL挂起了。如果我将字符串切成少于50,000个字符，它将起作用。50,000个字符后，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通过复杂类型执行实际的S3上传-
您在此处说明的内容看起来更像是您尝试将base64编码的图像作为字符串保存到字段中，我只能假定是DynamoDB表条目。但是，要使此方法起作用，您需要修改您的突变，以使该file字段不是String!，而是一个S3ObjectInput。

您需要在引擎盖下有一些活动部件，以确保在此“有效”（TM）之前就位。首先，您需要确保在GraphQL模式中定义的S3对象具有适当的输入和类型

enum Visibility {
    public
    private
}

input S3ObjectInput {
    bucket: String!
    region: String!
    localUri: String
    visibility: Visibility
    key: String
    mimeType: String
}

type S3Object {
    bucket: String!
    region: String!
    key: String!
}

在S3ObjectInput通过创建或更新在其中所述S3对象元数据被嵌入到一个模型的方式-型，当然，在上传新文件时是使用。可以通过以下方法在突变的请求解析器中进行处理：

{
    "version": "2017-02-28",
    "operation": "PutItem",
    "key": {
        "id": $util.dynamodb.toDynamoDBJson($ctx.args.input.id),
    },

    #set( $attribs = $util.dynamodb.toMapValues($ctx.args.input) )
    #set( $file = $ctx.args.input.file )
    #set( $attribs.file = $util.dynamodb.toS3Object($file.key, $file.bucket, $file.region, $file.version) )

    "attributeValues": $util.toJson($attribs)
}

这是假设S3文件对象是附加到DynamoDB数据源的模型的子字段。请注意，用于$utils.dynamodb.toS3Object()建立复杂S3对象的调用file，该对象是类型为的模型字段S3ObjectInput。以这种方式设置请求解析器可以处理文件到S3的上载（所有凭据都正确设置后，我们稍后再讨论），但是它没有解决如何S3Object找回。这是附加到本地数据源的字段级别解析器的地方。本质上，您需要在AppSync中创建本地数据源，并file使用以下请求和响应解析器将其连接到架构中的模型字段：

## Request Resolver ##
{
    "version": "2017-02-28",
    "payload": {}
}

## Response Resolver ##
$util.toJson($util.dynamodb.fromS3ObjectJson($context.source.file))

此解析器仅告诉AppSync我们要获取DynamoDB中存储的用于file模型字段的JSON字符串，并将其解析为S3Object-这样，当您执行模型查询时，而不是返回存储在模型中的字符串。file现场，你会得到包含的对象bucket，region和key属性，你可以使用它们来构建URL访问的S3对象（直接通过S3无论是或使用CDN
-这真的取决于您的配置）。

但是，请确保已为复杂对象设置了凭据（告诉您，我会回到此话题）。我将使用一个React示例来说明这一点-
定义AppSync参数（端点，auth等）时，complexObjectCredentials需要定义一个附加属性，以告诉客户端使用什么AWS凭证来处理S3上传，例如：

const client = new AWSAppSyncClient({
    url: AppSync.graphqlEndpoint,
    region: AppSync.region,
    auth: {
        type: AUTH_TYPE.AWS_IAM,
        credentials: () => Auth.currentCredentials()
    },
    complexObjectsCredentials: () => Auth.currentCredentials(),
});

假定所有这些条件都已就绪，则可以通过AppSync上传和下载S3。