ImagePickerWeb

这个Web插件允许Flutter Web选择图片（作为File、Widget或Uint8List）和视频（作为File或Uint8List）。非常感谢AlvaroVasconcelos在他的插件flutter_web_image_picker中实现了图片选择功能！

ExampleGif

视频免责声明

  • 截至[2020年3月]，由于安全原因，无法播放本地视频文件（也请参阅video_player_web）。但是，您可以检索文件并将其上传到某处，然后作为网络源播放。

入门

将image_picker_web添加到您的pubspec.yaml文件中

    image_picker_web: any

选择图片

将图像加载为Image Widget

    Image fromPicker = await ImagePickerWeb.getImage(outputType: ImageType.widget);

    if (fromPicker != null) {
      setState(() {
        pickedImage = fromPicker;
      });
    }

将outputType设置为ImageType.bytes

    Uint8List bytesFromPicker =
        await ImagePickerWeb.getImage(outputType: ImageType.bytes);

    if (bytesFromPicker != null) {
      debugPrint(bytesFromPicker.toString());
    }

将outputType设置为ImageType.file

    html.File imageFile =
        await ImagePickerWeb.getImage(outputType: ImageType.file);

    if (imageFile != null) {
      debugPrint(imageFile.name.toString());
    }

如何一次性获取图片/视频的所有信息（例如，同时获取Image和File）？

除了标准的getImage()或getVideo()方法外，您还可以使用getter

  • getImageInfo或
  • getVideoInfo来实现此目的。

完整示例

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);
      });
    }
  }

使用getMultipleImageInfos()，您可以在一次调用中获取所有三种可用类型。

选择视频

要将视频加载为html.File，请执行

    html.File videoFile = await ImagePickerWeb.getVideo(outputType: VideoType.file);

    debugPrint('---Picked Video File---');
    debugPrint(videoFile.name.toString());

要将视频加载为Uint8List，请执行

    Uint8List videoData = await ImagePickerWeb.getVideo(outputType: VideoType.bytes);

    debugPrint('---Picked Video Bytes---');
    debugPrint(videoData.toString());

请注意：不要对大型视频文件使用Uint8List检索！Flutter无法处理。请选择较大的视频和高分辨率视频作为html.File！

在将视频上传到某个托管服务器后，您可以检索网络URL来播放它。

MediaInfos

  • getVideoInfo和getImageInfo方法也可用，您可以使用它们来检索有关您选择的源的更多信息。

GitHub

https://github.com/Ahmadre/image_picker_web