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

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

本Web插件允许在Flutter Web中选择图片（作为File、Widget或Uint8List）和视频（作为File或Uint8List）。特别感谢AlvaroVasconcelos 实现了插件中图片选择的功能。

声明

目前（截至2020年3月），由于安全原因，无法播放本地视频文件（参见video_player_web）。但是你可以获取文件并上传到某个地方，然后通过网络源播放它。

开始使用

在pubspec.yaml文件中添加image_picker_web依赖：

dependencies:
  image_picker_web: any

图片选择

单选图片

加载图片作为Image.memory Widget：

Image? fromPicker = await ImagePickerWeb.getImageAsWidget();

加载图片作为字节：

Uint8List? bytesFromPicker = await ImagePickerWeb.getImageAsBytes();

加载图片作为html.File对象：

html.File? imageFile = (await ImagePickerWeb.getMultiImagesAsFile())?[0];

多选图片

加载多张图片作为List<Image>:

List<Image>? fromPicker = await ImagePickerWeb.getMultiImagesAsWidget();

加载多张图片作为字节列表：

List<Uint8List>? bytesFromPicker = await ImagePickerWeb.getMultiImagesAsBytes();

加载多张图片作为List<html.File>对象：

List<html.File> imageFiles = await ImagePickerWeb.getMultiImagesAsFile();

获取所有信息

除了标准的getImage()或getVideo()方法，你还可以使用以下方法来获取更多信息：

String mimeType = mime(Path.basename(mediaData.fileName));
html.File mediaFile = new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});

完整的示例代码：

import 'dart:html' as html;
 
import 'package:mime_type/mime_type.dart';
import 'package:path/path.dart' as Path;
import 'package:image_picker_web/image_picker_web.dart';
import 'package:flutter/material.dart';

html.File _cloudFile;
var _fileBytes;
Image _imageWidget;

Future<void> getMultipleImageInfos() async {
  var mediaData = await ImagePickerWeb.getImageInfo;
  String mimeType = mime(Path.basename(mediaData.fileName));
  html.File mediaFile = new html.File(mediaData.data, mediaData.fileName, {'type': mimeType});

  if (mediaFile != null) {
    setState(() {
      _cloudFile = mediaFile;
      _fileBytes = mediaData.data;
      _imageWidget = Image.memory(mediaData.data);
    });
  }
}

视频选择

要加载视频作为html.File：

html.File? videoFile = await ImagePickerWeb.getVideoAsFile();

要加载视频作为Uint8List：

Uint8List? videoData = await ImagePickerWeb.getVideoAsBytes();

注意：不要使用Uint8List来处理大视频文件！Flutter无法处理这些。选择较大的视频和高分辨率视频时应使用html.File。

媒体信息

可以使用getVideoInfo和getImageInfo方法来获取更多关于所选资源的信息。

加载多段视频作为字节列表：

List<Uint8List>? videos = ImagePickerWeb.getMultiVideosAsBytes();

加载多段视频作为List<html.File>对象：

List<html.File>? videoFiles = await ImagePickerWeb.getMultiVideosAsFile();

示例代码

import 'package:flutter/material.dart';
import 'package:image_picker_web_example/big_video_upload/big_video_upload_view.dart';
import 'package:image_picker_web_example/multi_video_upload/multi_video_upload.dart';
import 'package:image_picker_web_example/photo_history/photo_history_add_view.dart';
import 'package:image_picker_web_example/sample/sample_page.dart';

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: Center(
        child: SeparatedColumn(
          mainAxisAlignment: MainAxisAlignment.center,
          separator: SizedBox(height: 8),
          children: [
            _Button(
              label: 'Sample 1',
              page: SamplePage(),
            ),
            _Button(
              label: 'Photo History',
              page: PhotoHistoryAddPage(),
            ),
            _Button(
              label: 'Big Video Upload',
              page: BigVideoUploadView(),
            ),
            _Button(
              page: MultiVideoUploadView(),
              label: 'Upload Multi Videos',
            ),
          ],
        ),
      ),
    );
  }
}

class _Button extends StatelessWidget {
  const _Button({
    required this.label,
    required this.page,
  });

  final String label;
  final Widget page;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => Navigator.push(
        context,
        MaterialPageRoute(builder: (_) => page),
      ),
      child: Text(label),
    );
  }
}

class SeparatedColumn extends StatelessWidget {
  const SeparatedColumn({
    required this.separator,
    this.children = const [],
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.mainAxisAlignment = MainAxisAlignment.start,
  });

  final Widget separator;
  final List<Widget> children;
  final CrossAxisAlignment crossAxisAlignment;
  final MainAxisAlignment mainAxisAlignment;

  Iterable<Widget> _expandIndexed() sync* {
    for (var index = 0; index < children.length; index++) {
      yield children[index];
      if (index < children.length - 1) {
        yield separator;
      }
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: crossAxisAlignment,
      mainAxisAlignment: mainAxisAlignment,
      children: _expandIndexed().toList(),
    );
  }
}