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

Question

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

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

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

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

Answer 1

我认为现在无法通过 Amplify.API 上传复杂对象，至于使用 AppSync 上传，您需要将 complexObjectsCredentials 提交给 AppSync 客户端。

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

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

或者您可以使用 'Amplify.Storage' 模块在没有 AppSync 的情况下上传文件

Answer 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)       
    })

更多信息：https://aws-amplify.github.io/docs/js/storage

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

Upload image with AWS Amplify Appsync in React

graphql

aws-appsync

aws-amplify