Flutter网页图片选择插件sparrow_image_picker_for_web的使用

Flutter网页图片选择插件sparrow_image_picker_for_web的使用

sparrow_image_picker_for_web 是一个用于网页的 Flutter 图片选择插件。

在网页平台上的限制

由于网页浏览器不直接访问用户的文件系统，该插件提供了 PickedFile 抽象来在不同平台上实现统一的访问方式。

网页版本的插件在返回的 PickedFile 对象的 path 中放置网络可访问的 URI。

URL.createObjectURL()

PickedFile 对象在网页中由 URL.createObjectUrl Web API 支持：

然而，返回的 PickedFile 的 path 属性指向的是网络资源，而不是用户驱动器中的本地路径。下面是一些如何以跨平台方式使用此返回值的示例。

input file “accept”

为了仅过滤视频或图像内容，一些浏览器在其 <input type="file"> 表单元素中提供了一个 accept 属性：

这个功能只是为了方便用户，并不是验证手段。用户可以在浏览器上覆盖此设置。你必须在你的应用程序（或服务器）中验证用户是否选择了可以处理的文件类型。

input file “capture”

为了“拍摄照片”，一些移动浏览器提供了一个 capture 属性：

每个浏览器可能会按自己的方式实现 capture，因此它可能（或可能不会）影响你的用户的经验。

pickImage()

pickImage() 方法的参数 maxWidth、maxHeight 和 imageQuality 不支持 GIF 图像。imageQuality 参数仅适用于 JPEG 和 WebP 图像。

pickVideo()

pickVideo() 方法的参数 maxDuration 在网页上不受支持。

使用

导入包

该包是被推荐的，这意味着你可以像平常一样使用 image_picker。当你这样做时，这个包会自动包含在你的应用中。

使用插件

你应该能够几乎像平常一样使用 package:image_picker。

一旦用户选择了文件，返回的 PickedFile 实例将包含一个网络可访问的 URL（指向浏览器内的位置）。实例还将允许你在所有平台上获取所选文件的字节。

如果你想要直接使用路径，你的代码应该看起来像这样：

if (kIsWeb) {
  // 在网页上，使用 Image.network 显示图片
  Image.network(pickedFile.path);
} else {
  // 在其他平台上，使用 Image.file 显示图片
  Image.file(File(pickedFile.path));
}

或者，使用字节：

// 使用 Image.memory 显示图片的字节
Image.memory(await pickedFile.readAsBytes())

完整示例

以下是一个完整的示例，展示了如何在 Flutter 网页中使用 sparrow_image_picker_for_web 插件。

// Copyright 2013 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

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

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

/// App for testing
class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  PickedFile _pickedFile;

  Future<void> _pickImage() async {
    final pickedFile = await ImagePicker().getImage(source: ImageSource.gallery);
    setState(() {
      _pickedFile = pickedFile;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('图片选择示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: _pickImage,
                child: const Text('选择图片'),
              ),
              if (_pickedFile != null)
                kIsWeb
                    ? Image.network(_pickedFile.path)
                    : Image.file(File(_pickedFile.path)),
            ],
          ),
        ),
      ),
    );
  }
}