抖动将图片从计算机加载到Web应用程序 [英] flutter load pictures from computer to web application

问题描述

我正在尝试构建Web应用程序，但是我不知道如何将图片从用户计算机加载到Web.在移动应用程序上，它可以与image_picker库一起使用，但是在我的Web应用程序上，不能以这种方式工作.有没有人对此有所了解，或者计算机是否有其他库?

I am trying to build an web application but I don t know how to load pictures from the users computer to the web. On mobile apps it does work with the image_picker library but it does not work this way on my web app. Does anyone have knowledge about this or is there a different library for the computer?

推荐答案

这是我的一个项目的摘录.

Here is a snippet from one of my project.

Ui: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,
                        ),
                      );
                    },),

使用流控制器进行状态管理(向列表中添加新图像)

state management using stream controller (to add new images to the list)

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 ** UI小部件

1** The UI widget

使用的软件包 file_picker

这篇关于抖动将图片从计算机加载到Web应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！