Flutter阿里云OSS存储插件aliyunoss_plus_flutter的使用

Flutter 阿里云OSS存储插件aliyunoss_plus_flutter的使用

阿里云oss, 目前最好用的库, 没有之一. 终于为杂乱无章的非官方库画上句号!

Features

上传到阿里云OSS。它可以是一个视频、一张图片或其他文件。

Getting started

Install

pubspec.yaml文件中添加以下依赖:

dependencies:
  aliyunoss_plus_flutter: ^1.0.0

Usage

首先,我们需要导入必要的包并创建一个状态管理类来处理上传逻辑。

import 'package:aliyunoss_plus_flutter/aliyunoss_plus_flutter.dart';
import 'package:flutter/material.dart';

class AliyunPage extends StatefulWidget {
  const AliyunPage({super.key});

  [@override](/user/override)
  State<AliyunPage> createState() => _AliyunPageState();
}

class _AliyunPageState extends State<AliyunPage> {
  String filePath = "/Users/xxx/Downloads/video.mp4";
  late AliyunOssClient client;
  late AliyunOssConfig config;

  final String uploadId1 = "test-1";
  final String uploadId2 = "test-2";
  String showText = "准备上传";

  [@override](/user/override)
  void initState() {
    client = AliyunOssClient(
        accessKeyId: "STS.NSkZtxxxxxxxE",
        accessKeySecret: "77XxxxxXXXXXXXXXXXXXXXXXXXXXXtFv",
        securityToken:
            "CAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX==");
    config = AliyunOssConfig(
        endpoint: "https://oss-cn-shanghai.aliyuncs.com",
        bucket: "pvideo-xxx",
        directory: "dev-nom/20221103/");

    AliyunOssClient.eventStream.listen((event) {
      print("eventStream:${event.toString()}");
      if (mounted) {
        setState(() {
          showText = event.toString();
        });
      }
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('AliyunPage'),
        ),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              'filePath: $filePath',
            ),
            Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
              ElevatedButton(
                onPressed: () async {
                  final res = await client.upload(
                      id: uploadId1, config: config, filePath: filePath);
                  print("result:${res.toString()}");
                },
                child: const Text('直接上传'),
              ),
              ElevatedButton(
                onPressed: () async {
                  client.uploadMultipart(
                      id: uploadId2, config: config, filePath: filePath);
                },
                child: const Text('分片上传'),
              ),
              ElevatedButton(
                onPressed: () async {
                  AliyunOssClient.cancelTask(uploadId2);
                },
                child: const Text('暂停上传'),
              ),
              ElevatedButton(
                onPressed: () async {
                  client.resumeUpload(uploadId2);
                },
                child: const Text('恢复上传'),
              ),
            ]),
            Text(showText),
          ],
        ));
  }
}

更多关于Flutter阿里云OSS存储插件aliyunoss_plus_flutter的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter阿里云OSS存储插件aliyunoss_plus_flutter的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在使用Flutter开发应用时,如果你需要将文件上传到阿里云对象存储(OSS),可以使用aliyunoss_plus_flutter插件。这个插件提供了一个简单的方式来实现文件的上传、下载、删除等操作。以下是使用aliyunoss_plus_flutter插件的步骤和示例代码。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加aliyunoss_plus_flutter插件的依赖:

dependencies:
  aliyunoss_plus_flutter: ^1.0.0 # 请根据实际情况使用最新版本

然后运行flutter pub get来安装依赖。

2. 初始化OSS客户端

在使用插件之前,你需要初始化OSS客户端。你需要提供阿里云OSS的accessKeyIdaccessKeySecretendpointbucketName

import 'package:aliyunoss_plus_flutter/aliyunoss_plus_flutter.dart';

void initOSS() async {
  await AliyunossPlusFlutter.init(
    accessKeyId: 'your-access-key-id',
    accessKeySecret: 'your-access-key-secret',
    endpoint: 'your-oss-endpoint', // 例如: 'http://oss-cn-hangzhou.aliyuncs.com'
    bucketName: 'your-bucket-name',
  );
}

3. 上传文件

使用uploadFile方法将文件上传到OSS。你需要提供文件的本地路径和上传到OSS的文件名。

void uploadFile(String filePath, String ossFileName) async {
  try {
    String result = await AliyunossPlusFlutter.uploadFile(
      filePath: filePath,
      ossFileName: ossFileName,
    );
    print('Upload success: $result');
  } catch (e) {
    print('Upload failed: $e');
  }
}

4. 下载文件

使用downloadFile方法从OSS下载文件。你需要提供OSS的文件名和本地保存路径。

void downloadFile(String ossFileName, String savePath) async {
  try {
    String result = await AliyunossPlusFlutter.downloadFile(
      ossFileName: ossFileName,
      savePath: savePath,
    );
    print('Download success: $result');
  } catch (e) {
    print('Download failed: $e');
  }
}

5. 删除文件

使用deleteFile方法从OSS删除文件。你需要提供OSS的文件名。

void deleteFile(String ossFileName) async {
  try {
    String result = await AliyunossPlusFlutter.deleteFile(
      ossFileName: ossFileName,
    );
    print('Delete success: $result');
  } catch (e) {
    print('Delete failed: $e');
  }
}

6. 其他功能

aliyunoss_plus_flutter插件还支持其他功能,如列出OSS中的文件、获取文件的URL等。你可以根据插件的文档进行使用。

7. 处理权限

在Android和iOS平台上,你需要确保应用有读写存储的权限。你可以使用permission_handler插件来请求这些权限。

8. 示例代码

以下是一个完整的示例,展示如何使用aliyunoss_plus_flutter插件进行文件的上传、下载和删除操作。

import 'package:flutter/material.dart';
import 'package:aliyunoss_plus_flutter/aliyunoss_plus_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await initOSS();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Aliyun OSS Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () => uploadFile('path/to/local/file', 'oss-file-name'),
                child: Text('Upload File'),
              ),
              ElevatedButton(
                onPressed: () => downloadFile('oss-file-name', 'path/to/save/file'),
                child: Text('Download File'),
              ),
              ElevatedButton(
                onPressed: () => deleteFile('oss-file-name'),
                child: Text('Delete File'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部