实施

• 创建存储服务

  要添加映像存储功能，我们将使用 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

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

• 删除资源

  删除各个服务

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

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

  然后，运行 Amplify push 命令：
  

  amplify push

  删除整个项目

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

  amplify delete