aws 小程序

什么是放大存储？ (What is Amplify Storage?)

The Amplify Storage category provides an interface for managing user content for your app in […] storage buckets. The Storage category comes with default built-in support for Amazon Simple Storage Service (S3).

“放大存储”类别提供了一个界面，用于管理应用程序在[...]存储桶中的用户内容。 “存储”类别随附了对Amazon Simple Storage Service(S3)的默认内置支持。

NOTE: Amplify Flutter is still in developer preview and is not recommended for production use at this time.

注意：Amplify Flutter仍处于开发人员预览中，因此不建议在生产中使用。

我们将要做什么？ (What Will We Be Making?)

In this tutorial, we will be creating a simple application that uses the basic features of Amplify Storage. We will be able to upload an image, download it, and delete it using the Amplify API.

在本教程中，我们将创建一个使用Amplify Storage基本功能的简单应用程序。 我们将能够使用Amplify API上传图像，下载图像并将其删除。

Example Usage of App 应用用法示例

先决条件 (Prerequisites)

The only thing you need for this tutorial is the app you created in Part 1 of this tutorial series.

本教程唯一需要的是您在本系列教程的第1部分中创建的应用程序。

If you don’t want to read part 1 and you are already familiar with Amplify Flutter, then simply create a new Flutter application and connect it to a cloud instance of Amplify.

如果您不想阅读第1部分，并且已经熟悉Amplify Flutter，那么只需创建一个新的Flutter应用程序并将其连接到Amplify的云实例即可。

让我们潜入 (Let’s Dive In)

创建一个基本的扩增项目 (Create a Basic Amplify Project)

If you are using the app you created in Part 1, you can skip this step.

如果您使用的是在第1部分中创建的应用程序，则可以跳过此步骤。

Otherwise, create a new flutter project, and from the project directory run:

否则，创建一个新的flutter项目，然后从项目目录运行：

amplify init

设置后端 (Setup the Backend)

The backend can be set up entirely through the amplify cli:

后端可以完全通过放大cli设置：

amplify add storage Follow the setup wizard to add storage to your application 按照设置向导将存储添加到您的应用程序

检查我们的资源 (Checking on our resources)

To check on our project’s cloud resources, run:

要检查我们项目的云资源，请运行：

amplify console

This will launch your project’s console in your browser.

这将在浏览器中启动项目的控制台。

Authentication and File storage are configured for our project 为我们的项目配置了身份验证和文件存储

集成存储功能 (Integrate Storage Features)

Add the amplify packages to your pubspec.yaml.

将扩增程序包添加到您的pubspec.yaml。

dependencies: file_picker: '^1.8.0+1' amplify_core: '<1.0.0' amplify_auth_cognito: '<1.0.0' amplify_storage_s3: '<1.0.0'

Next, include the necessary packages in your main.dart file:

接下来，在main.dart文件中包括必要的软件包：

import 'package:file_picker/file_picker.dart';import 'package:amplify_core/amplify_core.dart';import 'package:amplify_storage_s3/amplify_storage_s3.dart';import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';

初始化放大存储 (Initializing Amplify Storage)

If you don’t want to be bored with the specifics of setting up this application from scratch, take a look at the gist here or the repo for the completed code.

如果你不希望与从头开始设置这个应用程序的细节无聊呢，一起来看看在主旨这里或回购的完成代码。

First, let’s set up a barebones main.dart for you to work with:

首先，让我们设置一个准系统main.dart，供您使用：

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart'; import 'package:flutter/material.dart'; import 'dart:io'; import 'package:file_picker/file_picker.dart'; import 'package:amplify_core/amplify_core.dart'; import 'package:amplify_storage_s3/amplify_storage_s3.dart'; import 'amplifyconfiguration.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool _isAmplifyConfigured = false; String _uploadFileResult = ''; String _getUrlResult = ''; String _removeResult = ''; Amplify amplify = new Amplify(); @override void initState() { super.initState(); configureAmplify(); } void configureAmplify() async { // First add plugins (Amplify native requirements) AmplifyStorageS3 storage = new AmplifyStorageS3(); AmplifyAuthCognito auth = new AmplifyAuthCognito(); amplify.addPlugin(authPlugins: [auth], storagePlugins: [storage]); // Configure await amplify.configure(amplifyconfig); setState(() { _isAmplifyConfigured = true; }); } void _upload() async { } void getUrl() async { } void _download() async { } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Amplify Flutter Storage Application'), ), body: Center( child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ RaisedButton( onPressed: _upload, child: const Text('Upload File'), ),], ), ), ), ); } }

As always, we want to configure our Amplify plugin. The only thing different between the previous tutorials is which plugins we will be adding. In this case, we want both AmplifyStorageS3 and AmplifyAuthCognito.

与往常一样，我们要配置Amplify插件。 之前的教程之间唯一的不同是我们将添加哪些插件。 在这种情况下，我们需要AmplifyStorageS3和AmplifyAuthCognito。

上载档案 (Uploading Files)

To upload a file from your computer to your emulated device, simply drag and drop a file over the emulator.

要将文件从计算机上载到仿真设备，只需将文件拖放到仿真器上即可。

You will also need to implement your _upload() function as follows:

您还需要实现_upload()函数，如下所示：

void _upload() async { try { print('In upload'); File local = await FilePicker.getFile(type: FileType.image); final key = 'ExampleKey'; Map<String, String> metadata = <String, String>{}; metadata['name'] = 'vennify_logo'; metadata['desc'] = 'A photo of the vennify logo'; S3UploadFileOptions options = S3UploadFileOptions( accessLevel: StorageAccessLevel.guest, metadata: metadata); UploadFileResult result = await Amplify.Storage.uploadFile( key: key, local: local, options: options); setState(() { _uploadFileResult = result.key; }); } catch (e) { print('UploadFile Err: ' + e.toString()); } }

This will upload a file to the cloud with the key ‘ExampleKey’ which we can use later to download or interact with the file.

这将使用密钥“ ExampleKey”将文件上传到云中，稍后我们可以使用它来下载文件或与文件进行交互。

‘ExampleKey’ file (our logo image) has been successfully added to our bucket “ ExampleKey”文件(我们的徽标图像)已成功添加到我们的存储桶中

下载文件 (Downloading Our File)

Okay, so we have a file now in our S3 bucket. Let’s say we want to render this image in our app. There are a couple of ways to do this, but for now, I will show you the easier of the two.

好的，现在我们的S3存储桶中有一个文件。 假设我们要在我们的应用中渲染此图像。 有两种方法可以做到这一点，但是现在，我将向您展示这两种方法中的简单方法。

void _getUrl() async { try { print('In getUrl'); String key = "ExampleKey"; S3GetUrlOptions options = S3GetUrlOptions( accessLevel: StorageAccessLevel.guest, expires: 10000); GetUrlResult result = await Amplify.Storage.getUrl(key: key, options: options); setState(() { _getUrlResult = result.url; }); } catch (e) { print('GetUrl Err: ' + e.toString()); } }

The _getUrl() function basically searched through our S3 bucket for a file with the key ‘ExampleKey’ and fetches the URL for this file. Using this URL, we can then load the image. In our example, once the URL is fetched, setState() is called, which rebuilds a NetworkImage in our widget tree, thus displaying our photo.

_getUrl()函数基本上在S3存储桶中搜索带有键“ ExampleKey”的文件，并获取该文件的URL。 使用此URL，我们可以加载图像。 在我们的示例中，提取URL后，将调用setState() ，这将在小部件树中重建NetworkImage ，从而显示我们的照片。

Don’t forget to add a button that executes getUrl() when pressed. You can always take a look at the repo if you are just interested in the completed code.

不要忘记添加一个在按下时执行getUrl()的按钮。 如果您只对完成的代码感兴趣，可以随时查看该存储库。

Pretty cool right? In your implementation, you may want to obtain the key (in this case it is hardcoded as ExampleKey) differently.

很酷吧？ 在您的实现中，您可能希望以不同的方式获取键(在这种情况下，它被硬编码为ExampleKey )。

删除文件 (Deleting Files)

Deleting files is very similar to uploading them. Like most of these storage functions, you interact with your files based on their key. Therefore, to delete a file in your bucket you just need its key.

删除文件与上传文件非常相似。 与大多数这些存储功能一样，您可以根据文件的密钥与文件进行交互。 因此，要删除存储桶中的文件，只需要其密钥即可。

void remove() async { try { String key = "ExampleKey"; RemoveOptions options = RemoveOptions(accessLevel: StorageAccessLevel.guest); RemoveResult result = await Amplify.Storage.remove(key: key, options: options); setState(() { _removeResult = result.key; }); print('_removeResult:' + _removeResult); } catch (e) { print('Remove Err: ' + e.toString()); } }

向前进 (Moving Forward)

Congratulations! You now have covered all of the basics of storage using S3, and if you have read the other parts of this series, you have also dabbled with Analytics using Pinpoint and Authentication with Cognito.

恭喜你！ 现在，您已经了解了使用S3进行存储的所有基础知识，并且，如果您已阅读本系列的其他部分，则还可以通过使用Pinpoint和Cognito身份验证来熟悉Analytics。

Now that we have the basics pinned down, future articles will feature a combination of these services to create more fully-featured applications.

现在我们已经确定了基础知识，以后的文章将结合使用这些服务来创建功能更全的应用程序。

本系列 (This Series)

Part 1: Basic Setup

第1部分： 基本设置

Part 2: Authentication

第2部分： 身份验证

Part 3: Analytics

第3部分： 分析

Part 4: Storage

第4部分： 存储

Amplify Flutter Documentation

放大Flutter文档

Amplify Flutter Repository

放大Flutter存储库

翻译自: https://medium.com/@vennify.education/flutter-apps-with-aws-backend-part-4-storage-74ae2dbdc4b5

aws 小程序

相关资源：aws_amplify_flutter_integration-源码