AWS Amplify教程之三：添加storage功能

教程

发布日期: 2021-08-03

前面对AWS Amplify进行一个基本的介绍，以及如何为React APP添加用户验证功能，下面介绍如何在Amplify中使用S3存储功能。

AWS Amplify

AWS Amplify系列教程：

增加storage服务

首先运行命令：

bash

amplify add storage

接下来Amplify会询问你是想要增加Content，也就是图片，音频等文件，还是NoSQL数据库，这里选择前者。具体选项如下：

AWS Amplify教程

可以看到，和存储相关的配置已经被添加到相应配置文件中了：

AWS Amplify教程

运行以下命令在AWS中创建相应资源：

bash

amplify push

React应用中的相应配置/代码

添加组件：src/components/StorageDemo.js:

javascript

import { useRef } from 'react';
import { Storage } from 'aws-amplify';

export default function StorageDemo() {
    const fileElement = useRef(null);

    const handleUpload = (e) => {
        let file = fileElement.current.files[0];
        Storage.put(file.name, file, {
            contentType: 'image/png'
        }).then(result => console.log(result))
        .catch(err => console.log(err));
    }

    return (
        <div>
            <input ref={fileElement} type="file" accept="image/png" onChange={handleUpload}/>
        </div>
    )
}

在App.js中添加对该组件的引用：

javascript

import './App.css';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
import StorageDemo from './components/StorageDemo';

function App() {
  return (
    <div className="App">
      <header>
        <h1>已增加认证功能</h1>
      </header>
      <AmplifySignOut />
      <StorageDemo/>
    </div>
  );
}

export default withAuthenticator(App);