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

2019-10-06 01:36:02 阅读：218 来源： 互联网

标签：aws-appsync javascript reactjs amazon-s3 graphql

我正在上传一个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 },
  },
});

解决方法:

这里正确的方法是使用AWS AppSync通过复杂类型执行实际的S3上传 – 您在此处说明的内容更像是您尝试将base64编码的图像作为字符串保存到字段中,我只能假设为DynamoDB表条目.但是,要使其工作,您需要修改您的变异,使文件字段不是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对象文件,该文件是类型为S3ObjectInput的模型字段.以这种方式设置请求解析器会处理将文件上传到S3(当所有凭据都设置正确时 – 我们稍后会触及它),但它没有解决如何恢复S3Object的问题.这是附加到本地数据源的字段级解析器变得必要的地方.实质上,您需要在AppSync中创建本地数据源,并使用以下请求和响应解析器将其连接到模式中的模型文件字段：

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

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

此解析器只是告诉AppSync我们想要将存储在DynamoDB中的JSON字符串作为模型的文件字段并将其解析为S3Object – 这样,当您对模型进行查询时,而不是返回存储的字符串在文件字段中,您将获得一个包含bucket,region和key属性的对象,您可以使用这些对象构建URL以访问S3对象(直接通过S3或使用CDN – 这实际上取决于您的配置).

确保你有为复杂对象设置的凭据,但是(告诉你我会回到这里).我将使用React示例来说明这一点 – 在定义AppSync参数(端点,身份验证等)时,需要定义一个名为complexObjectCredentials的附加属性,以告诉客户端用于处理S3上载的AWS凭据. ,例如：

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

假设所有这些都已到位,那么通过AppSync进行S3上传和下载应该可行.

标签：aws-appsync,javascript,reactjs,amazon-s3,graphql
来源： https://codeday.me/bug/20191006/1857992.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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