我想在 Flutter Web 应用程序中将图像上传为文件类型

如何解决我想在 Flutter Web 应用程序中将图像上传为文件类型

我正在尝试在 Flutter Web 应用程序中上传图像，但 ImagePicker 不适用于 Web 应用程序，我正在使用另一个插件 ImagePickerWeb 但它似乎也不起作用。

File image;
      // image = await ImagePickerWeb.getImage(outputType: ImageType.file);
      Image i = await ImagePickerWeb.getImage(outputType: ImageType.widget);
      print("imageeeeee");
      // print(i.toString());
      if(i!=null){
      File temp = await ImageUtils.imageToFile(imageName: i.toString(),ext: "jpg");
      // print(image.path);
      // image = (await FlutterWebImagePicker.getImage) as File;
      // print("printing image from gallery $image");

      image = temp;
    
    // final picker = ImagePicker();

    // final pickedFile = await picker.getImage(source: ImageSource.gallery);
    // print('PickedFile: ${pickedFile.toString()}');

    if(image!=null){
    setState(() {
      // image = File(pickedFile.path);
      model.image = image;
      _image = image;
      final bytes = image.readAsBytesSync();
      String _img64 = base64Encode(bytes);
      imageModel.value = "data:image/png;base64," + _img64;
    });
      }}
    print("printing image");

解决方法

我使用 image_picker_web: ^1.0.9

编写了一个示例

这里。

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

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

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  MediaInfo mediaInfo;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,children: [
          AnimatedContainer(
            height: mediaInfo == null ? 50 : 200,width: double.maxFinite,duration: Duration(milliseconds: 200),decoration: BoxDecoration(
                border: Border.all(color: Colors.grey),borderRadius: BorderRadius.circular(4)),child: Builder(
              builder: (context) {
                if (mediaInfo == null) {
                  return Center(
                    child: Text("Select An Image"),);
                }
                return ClipRRect(
                  child: Image.memory(
                    mediaInfo.data,semanticLabel: mediaInfo.fileName,fit: BoxFit.contain,borderRadius: BorderRadius.circular(4),);
              },SizedBox(height: 20),RaisedButton(
            onPressed: () {
              pickImage().then((value) {
                setState(() {
                  mediaInfo = value;
                });
              });
            },child: Text("Select Image"),],);
  }

  Future<MediaInfo> pickImage() async {
    MediaInfo mediaInfo = await ImagePickerWeb.getImageInfo;
    return mediaInfo;
  }
}

The Output