Flutter数据存储插件active_storage的使用

Flutter数据存储插件active_storage的使用

在本教程中，我们将详细介绍如何在Flutter应用中使用active_storage插件来上传文件到Rails应用中的Active Storage。

获取开始

首先，你需要创建一个ActiveStorage对象，并传入你的Rails后端地址，该地址应包含ActiveStorage::DirectUploadsController（或你自定义的控制器）。

var activeStorage = ActiveStorage(
  directUploadURL: 'http://localhost:3000/rails/active_storage/direct_uploads',
);

然后，你可以调用upload()方法，传入文件名、文件类型和文件实例。例如：

DirectUploadResponse response = await activeStorage.upload(
  fileName: 'picture.jpg',
  fileMimeType: 'image/jpeg',
  file: File('my/picture.jpg'),
);

DirectUploadResponse对象提供了signedId属性。你应该将此值设置为API请求属性，以便你的Rails后端将其设置到由ActiveStorage支持的ActiveRecord模型属性（即带有has_one_attached注解的属性）上。

自定义头部

如果你的Rails后端的上传端点只对已认证用户开放，那么你需要传递一个Authorization头部。你可以通过在调用upload()方法之前，在ActiveStorage实例上调用addHeader()方法来实现这一点。例如：

activeStorage.addHeader(
  'Authorization',
  'Bearer ae38e518bfb4e2b11c2e5cefffe4581e66af07296cfec4b2299ab54a74ef3d8c',
);

你可能还希望在上传请求中添加User-Agent信息。

上传进度

在上传大文件时，向用户提供有关上传进度的反馈非常重要。为此，你可以在upload()方法中传递一个回调函数，该函数将在每次发送字节块到服务器时被调用，并且每次都会接收到一个表示上传进度百分比的double值。例如：

DirectUploadResponse response = await activeStorage.upload(
  fileName: 'large.jpg',
  fileMimeType: 'image/jpeg',
  file: File('pics/large.jpg'),
  onProgress: (percent) {
    print('Uploaded ${percent.toStringAsFixed(2)}%');
  },
);

完整示例

下面是一个完整的示例，展示了如何使用active_storage插件进行文件上传：

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:active_storage/active_storage.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Active Storage Demo')),
        body: Center(
          child: UploadButton(),
        ),
      ),
    );
  }
}

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

class _UploadButtonState extends State<UploadButton> {
  String _status = '';

  void _uploadFile() async {
    var activeStorage = ActiveStorage(
      directUploadURL: 'http://localhost:3000/rails/active_storage/direct_uploads',
    );

    // 添加认证头
    activeStorage.addHeader(
      'Authorization',
      'Bearer ae38e518bfb4e2b11c2e5cefffe4581e66af07296cfec4b2299ab54a74ef3d8c',
    );

    try {
      DirectUploadResponse response = await activeStorage.upload(
        fileName: 'large.jpg',
        fileMimeType: 'image/jpeg',
        file: File('pics/large.jpg'),
        onProgress: (percent) {
          setState(() {
            _status = 'Uploaded ${percent.toStringAsFixed(2)}%';
          });
        },
      );
      setState(() {
        _status = 'Upload successful! Signed ID: ${response.signedId}';
      });
    } catch (e) {
      setState(() {
        _status = 'Upload failed: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton(
          onPressed: _uploadFile,
          child: Text('Upload File'),
        ),
        SizedBox(height: 20),
        Text(_status),
      ],
    );
  }
}