Flutter文件上传管理插件uploadcare_client的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter文件上传管理插件uploadcare_client的使用

Uploadcare是一个全面的文件处理平台,可以帮助你更快地交付产品并专注于业务目标。uploadcare_client是Dart/Flutter的一个库,用于与Uploadcare REST API交互,支持文件上传、媒体处理和自适应交付。

安装

在你的项目中添加uploadcare_client包:

Dart

dart pub add uploadcare_client # 或者 uploadcare_flutter

Flutter

flutter pub add uploadcare_client # 或者 uploadcare_flutter

创建一个客户端实例:

final client = UploadcareClient.withSimpleAuth(
  publicKey: 'your_public_key',
  apiVersion: 'v0.7',
);

UploadcareClient提供了多个API部分:

final ApiUpload upload;
final ApiFiles files;
final ApiGroups groups;
final ApiDocumentConverting documentConverting;
final ApiVideoEncoding videoEncoding;
final ApiAddons addons;
final ApiWebhooks webhooks;
final ApiProject project;

文件上传

基本上传

适用于小文件:

final fileId = await client.upload.base(UCFile(File('path/to/small_file')));

分块上传

适用于大文件:

final fileId = await client.upload.multipart(UCFile(File('path/to/large_file')));

从URL上传

final fileId = await client.upload.fromUrl('https://files.st/path_to_file');

自动上传

自动选择合适的上传方法:

final fileId1 = await client.upload.auto(UCFile(File('path/to/small_file')));
final fileId2 = await client.upload.auto(UCFile(File('path/to/large_file')));
final fileId3 = await client.upload.auto('https://files.st/path_to_file');

在隔离线程中上传

不适用于Web环境:

final fileId = await client.upload.auto(UCFile(File('path/to/file')), runInIsolate: true);

进度跟踪

所有上传方法都接受一个进度回调:

final fileId = await client.upload.auto(UCFile(File('path/to/file')), onProgress: (progress) => print(progress));

可取消的上传

使用CancelToken取消上传:

final cancelToken = CancelToken();

Timer(Duration(seconds: 1), cancelToken.cancel);

try {
  final fileId = await client.upload.auto(UCFile(File('/some/file')), cancelToken: cancelToken);
} on CancelUploadException catch (e) {
  // 已取消
}

签名上传

需要提供项目的私钥:

final client = UploadcareClient(options: ClientOptions(
  authorizationScheme: AuthSchemeRegular(
    publicKey: 'public_key',
    privateKey: 'private_key',
    apiVersion: 'v0.7',
  ),
  useSignedUploads: true,
));

await client.upload.base(UCFile(File('path/to/file')));

图像和文件转换

官方文档:图像转换

示例代码:

final cropedCdnImage = CdnImage('<image-uuid>')..transform(CropTransformation(aspectRatio: AspectRatio(9, 16)));

// 使用以下字段获取裁剪后的图像URL
print(cropedCdnImage.url);

文件操作

获取文件信息

final FileInfoEntity file = await client.files.file('<file-uuid>');

获取文件列表

final ListEntity<FileInfoEntity> list = await client.files.list();

删除文件

await client.files.remove(['<file-uuid>', '<file-uuid>']);

存储文件

await client.files.store(['<file-uuid>', '<file-uuid>']);

元数据操作

// 获取文件的所有元数据
final Map<String, String> metadata = await client.files.getFileMetadata('<file-uuid>');

// 更新特定元数据键的值
final String updatedValue = await client.files.updateFileMetadataValue('<file-uuid>', '<metadata-key>', '<new-value>');

示例Demo

以下是一个完整的示例,展示了如何使用uploadcare_client进行文件上传和基本操作:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UploadPage(),
    );
  }
}

class UploadPage extends StatefulWidget {
  [@override](/user/override)
  _UploadPageState createState() => _UploadPageState();
}

class _UploadPageState extends State<UploadPage> {
  final UploadcareClient client = UploadcareClient.withSimpleAuth(
    publicKey: 'your_public_key',
    apiVersion: 'v0.7',
  );

  Future<void> uploadFile() async {
    try {
      final fileId = await client.upload.base(UCFile(File('path/to/your/file')));
      print('File uploaded with ID: $fileId');
    } catch (e) {
      print('Error uploading file: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Uploadcare Demo')),
      body: Center(
        child: ElevatedButton(
          onPressed: uploadFile,
          child: Text('Upload File'),
        ),
      ),
    );
  }
}

更多关于Flutter文件上传管理插件uploadcare_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文件上传管理插件uploadcare_client的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何在Flutter中使用uploadcare_client插件进行文件上传的示例代码。这个插件允许你使用Uploadcare的服务来上传和管理文件。

首先,你需要在你的pubspec.yaml文件中添加uploadcare_client依赖:

dependencies:
  flutter:
    sdk: flutter
  uploadcare_client: ^最新版本号  # 请替换为实际的最新版本号

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

接下来,我们编写一个示例应用来演示如何使用uploadcare_client进行文件上传。

  1. 配置Uploadcare凭证

    在你的Flutter应用的根目录下创建一个名为keys.dart的文件,用于存储你的Uploadcare公钥和私钥(请确保不要将这些密钥硬编码到你的生产代码中,而是使用环境变量或安全存储)。

// keys.dart
const String uploadcarePublicKey = '你的Uploadcare公钥';
const String uploadcareSecretKey = '你的Uploadcare私钥';
  1. 初始化Uploadcare客户端

    在你的主应用文件中(通常是main.dart),初始化Uploadcare客户端并配置上传功能。

import 'package:flutter/material.dart';
import 'package:uploadcare_client/uploadcare_client.dart';
import 'keys.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Uploadcare Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UploadcareDemo(),
    );
  }
}

class UploadcareDemo extends StatefulWidget {
  @override
  _UploadcareDemoState createState() => _UploadcareDemoState();
}

class _UploadcareDemoState extends State<UploadcareDemo> {
  UploadcareClient? uploadcareClient;

  @override
  void initState() {
    super.initState();
    initUploadcareClient();
  }

  void initUploadcareClient() async {
    uploadcareClient = await UploadcareClient.configure(
      publicKey: uploadcarePublicKey,
      secretKey: uploadcareSecretKey, // 注意:不要在客户端应用中包含私钥,这里仅用于演示
    );
  }

  void _uploadFile(File file) async {
    if (uploadcareClient != null) {
      try {
        var result = await uploadcareClient!.uploadFile(file);
        print('File uploaded: ${result.url}');
      } catch (e) {
        print('Error uploading file: $e');
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Uploadcare Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                // 这里你应该有一个文件选择器来让用户选择文件
                // 为了演示,我们假设你已经有一个File对象
                File file = await _pickImage(); // 这是一个示例函数,你需要自己实现
                if (file != null) {
                  _uploadFile(file);
                }
              },
              child: Text('Upload File'),
            ),
          ],
        ),
      ),
    );
  }

  // 示例文件选择器函数,你需要自己实现或替换为实际的文件选择器
  Future<File?> _pickImage() async {
    // 示例:使用image_picker插件来选择图片
    // 请确保在pubspec.yaml中添加image_picker依赖并导入
    // import 'package:image_picker/image_picker.dart';
    // final ImagePicker _picker = ImagePicker();
    // return await _picker.pickImage(source: ImageSource.camera);

    // 由于我们在这里不能真正使用image_picker,所以返回null
    return null;
  }
}

注意

  • 在生产环境中,不要将私钥硬编码到客户端代码中。私钥应该在服务器端安全存储,并通过API调用与客户端交互。
  • 上面的示例代码中有一个_pickImage函数,它应该实现文件选择逻辑。你可以使用image_picker插件或其他文件选择库来实现这一功能。
  • 确保你已经处理了必要的权限,例如相机和存储权限,如果你的应用需要访问这些设备功能。

这个示例代码提供了一个基本框架,展示了如何在Flutter中使用uploadcare_client插件进行文件上传。你可以根据需要进行扩展和定制。

回到顶部