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

Posted 2023-03-08

【中文标题】在 React 中使用 AWS Amplify Appsync 上传图像

【英文标题】：Upload image with AWS Amplify Appsync in React

【发布时间】：2019-01-15 07:08:33

【问题描述】：

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

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

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

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

【参考方案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)       
    )

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