在 React 中使用 AWS Amplify Appsync 上传图像答案

【问题标题】：Upload image with AWS Amplify Appsync in React在 React 中使用 AWS Amplify Appsync 上传图像
【发布时间】：2019-01-15 07:08:33
【问题描述】：

我有一个使用 AWS Amplify 和 Appsync 设置的 react 项目。

我正在使用 Amplify 中的 GraphQL 功能与 AppSync 交互。

我正在尝试从 react 应用程序将图像上传到 S3。有没有人通过 Amplify GraphQL 做到这一点？你能帮忙吗？

顺便说一句，我已阅读有关如何使用 Apollo 和 aws-appsync-react 执行此操作的文档。我正在尝试弄清楚如何使用 Amplify 中内置的 GraphQL 功能。

【问题讨论】：

标签： graphql aws-appsync aws-amplify

【解决方案1】：

我认为目前无法通过 Amplify.API 上传复杂对象，因为使用 AppSync 上传需要将 complexObjectsCredentials 提交给 AppSync 客户端。

const client = new AWSAppSyncClient({
    url: ENDPOINT,
    region: REGION,
    auth: { .. },
    complexObjectsCredentials: () => Auth.currentCredentials(),
});

在配置放大时，您似乎无法提供这些凭据。

或者，您可以使用“Amplify.Storage”模块在不使用 AppSync 的情况下上传文件

【讨论】：

【解决方案2】：

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

// above goes at root of application

// below is example

import { Storage } from 'aws-amplify'

var imageSrc = this.webcam.getScreenshot()

fetch(imageSrc)
    .then(res => res.blob() )
    .then( blob => {
        const file = new File( [blob], "tmp.png")
        key = "uuid_for_image"
        Storage.put(key, image)       
    })

【讨论】：