操作步骤

• 创建存储服务

  要添加图像存储功能，我们将使用 Amplify Storage（存储）类别：对于下面的大多数选项，您可以保留默认选择，但请确保分别选择 create/update、read 和 delete 选项，方法是在按 Enter 键继续提示之前，在每个选项上按空格键。
  

  amplify add storage
  
  ? Select from one of the below mentioned services: Content (Images, audio, video, etc.)
  ? Provide a friendly name for your resource that will be used to label this category in the project: imagestorage
  ? 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/update, read, delete
  ? Do you want to add a Lambda Trigger for your S3 Bucket? (y/N) no

  Code snippet copied

  复制
• 更新 GraphQL 模式

  接下来，打开 amplify/backend/api/notesapp/schema.graphql，并使用以下模式更新：
  

  type Note @model @auth(rules: [ { allow: public } ] ){
    id: ID!
    name: String!
    description: String
    image: String
  }

  Code snippet copied

  复制

  务必保存文件。
  

• 部署存储服务和 API 更新

  现在本地已配置好存储服务，并且更新了 GraphQL 模式，我们可以通过运行 Amplify push 命令来部署更新：
  

  amplify push --y

  Code snippet copied

  复制
• 更新 React 应用程序

  现在后端已更新，接下来我们将更新 React 应用程序，添加上传和查看笔记图像的功能。打开 src/App.js，进行以下更改。

  a. 将 Storage 类和 lmage 组件通过 import 从 Amplify 库导入：

  import { API, Storage } from 'aws-amplify';
  import {
    Button,
    Flex,
    Heading,
    Image,
    Text,
    TextField,
    View,
    withAuthenticator,
  } from '@aws-amplify/ui-react';

  Code snippet copied

  复制

  b. 更新 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 url = await Storage.get(note.name);
          note.image = url;
        }
        return note;
      })
    );
    setNotes(notesFromAPI);
  }

  Code snippet copied

  复制

  c. 更新 createNote 函数，以便在笔记关联了图像时将该图像添加到本地图像数组中：
  

  async function createNote(event) {
    event.preventDefault();
    const form = new FormData(event.target);
    const image = form.get("image");
    const data = {
      name: form.get("name"),
      description: form.get("description"),
      image: image.name,
    };
    if (!!data.image) await Storage.put(data.name, image);
    await API.graphql({
      query: createNoteMutation,
      variables: { input: data },
    });
    fetchNotes();
    event.target.reset();
  }
  

  Code snippet copied

  复制

  d. 更新 deleteNote 函数，以便在删除笔记时从存储中删除相应的文件：
  

  async function deleteNote({ id, name }) {
    const newNotes = notes.filter((note) => note.id !== id);
    setNotes(newNotes);
    await Storage.remove(name);
    await API.graphql({
      query: deleteNoteMutation,
      variables: { input: { id } },
    });
  }

  Code snippet copied

  复制

  e. 在返回块的表单中添加一个额外的输入：
  

  <View
    name="image"
    as="input"
    type="file"
    style={{ alignSelf: "end" }}
  />

  Code snippet copied

  复制

  f. 在遍历笔记数组时，如果存在图像，则渲染该图像：
  

  {notes.map((note) => (
    <Flex
      key={note.id || note.name}
      direction="row"
      justifyContent="center"
      alignItems="center"
    >
      <Text as="strong" fontWeight={700}>
        {note.name}
      </Text>
      <Text as="span">{note.description}</Text>
      {note.image && (
        <Image
          src={note.image}
          alt={`visual aid for ${notes.name}`}
          style={{ width: 400 }}
        />
      )}
      <Button variation="link" onClick={() => deleteNote(note)}>
        Delete note
      </Button>
    </Flex>
  ))}

  Code snippet copied

  复制

  g. 提交更改并推送到 GitHub。然后等待构建完成，即可实时查看您的完整应用程序！
  

  git add .
  git commit -m "Added graphql and storage"
  git push origin main

  Code snippet copied

  复制
• 运行应用程序

  要测试应用程序，请运行 start 命令：
  

  npm start

  Code snippet copied

  复制

  现在，您应该可以选择为每个笔记上传图像了。
  

• 删除资源

  移除单个服务

  要移除单个服务，您可以使用 Amplify remove 命令：

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

  Code snippet copied

  复制

  然后运行 Amplify push 命令：
  

  amplify push

  Code snippet copied

  复制

  删除整个项目

  要删除项目及其关联的资源，可以运行 Amplify delete 命令：
  

  amplify delete

  Code snippet copied

  复制