flutter - 将图片从计算机加载到 Web 应用程序

Question

我正在尝试构建一个 Web 应用程序，但我不知道如何将图片从用户计算机加载到 Web。在移动应用程序上，它可以与 image_picker 库一起使用，但在我的网络应用程序上却不能这样工作。是否有人对此有所了解，或者计算机是否有不同的库？

标签： flutterdart

Answer 1

这是我的一个项目的一个片段。

用户界面：1**

StreamBuilder(
                  initialData: [],
                    stream: Addnewbloc.imageStream,
                    builder: (context, snapshot) {
                    List<Widget> kids=[Padding(
                        padding:  EdgeInsets.all(8.0),
                        child: InkWell(
                          onTap: () async {
                            // adds images
                            FilePickerResult result = await FilePicker.platform.pickFiles(allowMultiple: true,type: FileType.custom,allowedExtensions: ['jpg', 'png', 'jpeg'],);
                            if(result != null) {
                              res = result.files;
                              Addnewbloc.imageeventSink.add(res);
                            } else {
                              // User canceled the picker
                            }

                          },
                          child: Container(
                            decoration: BoxDecoration(border: Border.all(color: Colors.red[400]),),
                            height: getProportionateScreenHeight(100),
                            width: getProportionateScreenWidth(50),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Center(child: Icon(Icons.add)),
                                Text('Add Image'),],),
                          ),
                        ),
                      ),];
                    for (int i=0;i<snapshot.data.length;i++){
                      Uint8List bytes  = snapshot.data[i].bytes;
                      kids.add(
                          Padding(
                            padding:  EdgeInsets.all(8.0),
                            child: InkWell(
                              onLongPress: (){
                                showDialog(context: context, builder: (context) {
                                  return AlertDialog(
                                    title: Text('Remove Image'),
                                    content: Text('Are you sure you want to remove this image ?'),
                                    actions: [
                                      TextButton(onPressed: (){Addnewbloc.imageremoveSink.add(i);Navigator.pop(context);}, child: Text('Yes')),
                                      TextButton(onPressed: ()=>{Navigator.pop(context)}, child: Text('No'))
                                    ],
                                  );
                                },);

                              },
                              child: Container(
                                decoration: BoxDecoration(border: Border.all(color: Colors.red[400]),),
                                height: getProportionateScreenHeight(100),
                                width: getProportionateScreenWidth(50),
                                child: Image.memory(bytes,fit: BoxFit.fill,),
                        ),
                            ),
                      ));
                    }
                      return Container(
                        width: double.infinity,
                        decoration: BoxDecoration(
                          border: Border.all(color: Colors.grey[400]),
                        ),

                        child: Wrap(
                          children: kids,
                        ),
                      );
                    },),

使用流控制器进行状态管理（将新图像添加到列表中）

import 'dart:async';

import 'package:file_picker/file_picker.dart';

class NewProductBloc{
  List<PlatformFile> files;
  
 
  // for image upload
  final _imageStreamController = StreamController<List<PlatformFile>>();  // for images
  final _imageeventStreamController = StreamController<List<PlatformFile>>(); // for images
  final _imageremoveStreamController = StreamController<int>(); // for images removal

  StreamSink<List<PlatformFile>> get imageSink => _imageStreamController.sink;
  Stream<List<PlatformFile>> get imageStream => _imageStreamController.stream;

  StreamSink<List<PlatformFile>> get imageeventSink => _imageeventStreamController.sink;
  Stream<List<PlatformFile>> get imageeventStream => _imageeventStreamController.stream;

  StreamSink<int> get imageremoveSink => _imageremoveStreamController.sink;
  Stream<int> get imageremoveStream => _imageremoveStreamController.stream;

  NewProductBloc(){
    files = [];
    //add image
    imageeventStream.listen((event) {
      event.forEach((element) {
        if (!files.contains(element))
        files.add(element);

      });
      imageSink.add(files);
    });
    // removal
    imageremoveStream.listen((index) {
      files.removeAt(index);
      imageSink.add(files);
    });
  }

  void dispose(){
  _imageremoveStreamController.close();
  _imageeventStreamController.close();
  _imageremoveStreamController.close();
  }

}

图片：

1** 用户界面小部件

使用的包file_picker