开始使用 AWS

构建 React 应用程序

使用 AWS Amplify 创建简单的 Web 应用程序

模块 5:添加存储

在本模块中,您将添加存储以及将图像与您的应用程序中的备注关联的能力。

简介

现在,我们的备注应用程序已在运行,接下来添加将图像与每个备注关联的能力。在本模块中,您将使用 Amplify CLI 和库来创建利用 Amazon S3 的存储服务。然后,您将更新在上一个模块中创建的 GraphQL 架构,以将图像与每个备注关联。最后,您将更新 React 应用程序以启用图像上传、获取和渲染。

您将学到的内容

  • 创建存储服务
  • 更新 GraphQL 架构
  • 更新您的 React 应用程序

重要概念

存储服务 - 存储和查询图像和视频之类的文件是大多数应用程序的常见要求。进行此操作的一个选项是对文件进行 Base64 编码并将其作为字符串发送,以保存在数据库中。这样做也有一些缺点,比如被编码的文件比原始二进制文件大,操作的计算开销大,以及正确编码和解码的复杂性增加了。另一个选项是利用专为文件存储构建和优化存储服务。Amazon S3 之类的存储服务使这一过程尽可能简单、高效且廉价。

 完成时间

10 分钟

 使用的服务

实施

  • 创建存储服务

    要添加映像存储功能,我们将使用 Amplify 存储类别:

    amplify add storage
    
    ? Please select from one of the below mentioned services: Content
    ? Please provide a friendly name for your resource that will be used to label this category in the project: imagestorage
    ? Please provide bucket name: <your-unique-bucket-name>
    ? Who should have access: Auth users only
    ? What kind of access do you want for Authenticated users? create, read, update, delete
    ? Do you want to add a Lambda Trigger for your S3 Bucket? N
  • 更新 GraphQL 架构

    接下来,开发 amplify/backend/api/notesapp/schema.graphql 并在其中更新以下架构:

    type Note @model {
      id: ID!
      name: String!
      description: String
      image: String
    }
    

    确保保存文件。

  • 部署存储服务和 API 更新

    现在,存储服务已在本地配置且我们已更新 GraphQL 架构,我们可以通过运行 Amplify push 命令部署更新:

    amplify push --y
  • 更新 React 应用程序

    现在,后端已更新,让我们更新 React 应用程序来添加上传和查看备注图像的功能。打开 src/App.js 并进行下列更改。

    a.首先将存储类添加到您的 Amplify 导入中:

    import { API, Storage } from 'aws-amplify';

    b.在主应用程序函数中,创建一个新的 onChange 函数来处理图像上传:

    async function onChange(e) {
      if (!e.target.files[0]) return
      const file = e.target.files[0];
      setFormData({ ...formData, image: file.name });
      await Storage.put(file.name, file);
      fetchNotes();
    }
    

    c.更新 fetchNotes 函数以在存储与备注相关的图像时获取图像:

    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      const notesFromAPI = apiData.data.listNotes.items;
      await Promise.all(notesFromAPI.map(async note => {
        if (note.image) {
          const image = await Storage.get(note.image);
          note.image = image;
        }
        return note;
      }))
      setNotes(apiData.data.listNotes.items);
    }
    

    d.更新 createNote 函数以在存在于备注相关的图像时将图像添加到本地图像阵列中:

    async function createNote() {
      if (!formData.name || !formData.description) return;
      await API.graphql({ query: createNoteMutation, variables: { input: formData } });
      if (formData.image) {
        const image = await Storage.get(formData.image);
        formData.image = image;
      }
      setNotes([ ...notes, formData ]);
      setFormData(initialFormState);
    }
    

    e.添加另一个输入到返回数据块的表格中:

    <input
      type="file"
      onChange={onChange}
    />
    

    f.对备注阵列进行映射时,若存在图像,对其进行渲染:

    {
      notes.map(note => (
        <div key={note.id || note.name}>
          <h2>{note.name}</h2>
          <p>{note.description}</p>
          <button onClick={() => deleteNote(note)}>Delete note</button>
          {
            note.image && <img src={note.image} style={{width: 400}} />
          }
        </div>
      ))
    }
    
  • 运行应用程序

    要测试应用程序,请运行 start 命令:

    npm start

    现在,您应该能够选择性地上传每个备注的图像。

结论

您已经使用 AWS Amplify 部署了 Web 应用程序! 您已经在应用程序中添加了身份验证,使用户可以注册、登录和管理其账户。该应用程序还使用 Amazon DynamoDB 数据库配置了一个可扩展的 GraphQL API,使用户可以创建和删除备注。您还使用 Amazon S3 添加了文件存储,从而使用户可以上传图像并在其应用程序中查看它们。

  • 删除资源

    删除各个服务

    要删除各个服务,您可以使用 Amplify remove 命令:

    amplify remove auth
    
    ? Choose the resource you would want to remove: <your-service-name>

    然后,运行 Amplify push 命令:

    amplify push

    删除整个项目

    要删除项目和相关的资源,您可以运行 Amplify delete 命令:

    amplify delete

此模块有帮助吗?

谢谢
请告知我们您喜欢什么。
关闭
很抱歉让您失望了
是否存在过时、令人困惑或不准确的内容? 请向我们提供反馈,帮助我们改进本教程。
关闭

恭喜!

您已在 AWS 上成功构建 Web 应用程序! 接下来,深入研究特定的 AWS 技术并让您的应用程序进入一下个级别。