选择上传图片什么的 - flutter

import 'package:dio/dio.dart';
import 'package:http_parser/http_parser.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:image_pickers/image_pickers.dart';
import 'dart:io';
import 'dart:typed_data';
import 'dart:async';
import 'dart:ui' as ui;


class SelectPictures extends StatefulWidget {
  @override
  _SelectPicturesState createState() => _SelectPicturesState();
}

class _SelectPicturesState extends State<SelectPictures> {

  GalleryMode _galleryMode = GalleryMode.image;
  GlobalKey globalKey;
  @override
  void initState() {
    super.initState();
    globalKey = GlobalKey();
  }

  List<Media> _listImagePaths = List();
  List<Media> _listVideoPaths = List();
  String dataImagePath = "";

  Future<void> selectImages() async {
    try {
      _galleryMode = GalleryMode.image;
      _listImagePaths = await ImagePickers.pickerPaths(
        galleryMode: _galleryMode,
        showGif: true,
        selectCount: 5,
        showCamera: true,
        cropConfig :CropConfig(enableCrop: true,height: 1,width: 1),
        compressSize: 500,
        uiConfig: UIConfig(uiThemeColor: Color(0xffff0000),
        ),

      );
      _listImagePaths.forEach((media){

        print("------------------------------------------------------------");
        print(media.path.toString());
      });
      String imagePath = _listImagePaths[0].path.toString();
      int index = imagePath.lastIndexOf("/");
      String firstImagePath = imagePath.substring(0, index + 1);
      String imageName = imagePath.substring(index + 1);
      print(firstImagePath);
      print(imageName);
      print(index);

      MediaType.parse("image/png");

      MultipartFile multipartFile = await MultipartFile.fromFile(imagePath);
      FormData formData = new FormData.fromMap({
        "name":"李二蛋啊",
        "age" : 25,
        "file" : multipartFile
      });

      Dio().post(
        "http://192.168.1.91/json.php",
        data: formData
      ).then((value) => print("*********************************************" + value.toString() + "**************************************"));

      setState(() {

      });
    } on PlatformException {}
  }

  Future<void> selectVideos() async {
    try {
      _galleryMode = GalleryMode.video;
      _listVideoPaths = await ImagePickers.pickerPaths(
        galleryMode: _galleryMode,
        selectCount: 2,
        showCamera: true,
      );
      setState(() {

      });
      print(_listVideoPaths);
    } on PlatformException {}
  }

  @override
  Widget build(BuildContext context) {
    return RepaintBoundary(
      key: globalKey,
      child: MaterialApp(
        theme: ThemeData(
          backgroundColor: Colors.white,
          primaryColor: Colors.white,
        ),

        home: Scaffold(
          appBar: AppBar(
            title: const Text('多图选择'),
          ),
          body: SingleChildScrollView(
            physics: BouncingScrollPhysics(),
            child: Column(
              children: <Widget>[
                GridView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: _listImagePaths == null ? 0 : _listImagePaths.length,
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        mainAxisSpacing: 20.0,
                        crossAxisSpacing: 10.0,
                        childAspectRatio: 1.0),
                    itemBuilder: (BuildContext context, int index) {
                      return GestureDetector(
                        onTap: (){
//                        ImagePickers.previewImage(_listImagePaths[index].path);

//                      List<String> paths = [];
//                        _listImagePaths.forEach((media){
//                          paths.add(media.path);
//                        });
//
//                        ImagePickers.previewImages(paths,index);

                          ImagePickers.previewImagesByMedia(_listImagePaths,index);
                        },
                        child: Image.file(
                          File(
                            _listImagePaths[index].path,
                          ),
                          fit: BoxFit.cover,
                        ),
                      );
                    }),
                RaisedButton(
                  onPressed: () {
                    selectImages();
                  },
                  child: Text("选择图片"),
                ),
                RaisedButton(
                  onPressed: () {

                    ImagePickers.openCamera(cropConfig: CropConfig(enableCrop: false, width: 2, height: 3)).then((Media media){
                      _listImagePaths.clear();
                      _listImagePaths.add(media);
                      setState(() {

                      });
                    });
                  },
                  child: Text("拍照"),
                ),
                RaisedButton(
                  onPressed: () {
                    ImagePickers.openCamera(cameraMimeType: CameraMimeType.video).then((media){
                      _listVideoPaths.clear();
                      _listVideoPaths.add(media);
                      setState(() {

                      });
                    });
                  },
                  child: Text("拍视频"),
                ),
                GridView.builder(
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: _listVideoPaths == null ? 0 : _listVideoPaths.length,
                    shrinkWrap: true,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        mainAxisSpacing: 20.0,
                        crossAxisSpacing: 10.0,
                        childAspectRatio: 1.0),
                    itemBuilder: (BuildContext context, int index) {
                      return GestureDetector(
                        onTap: (){
                          ImagePickers.previewVideo(_listVideoPaths[index].path,);
                        },
                        child: Image.file(
                          File(
                            _listVideoPaths[index].thumbPath,
                          ),
                          fit: BoxFit.cover,
                        ),
                      );
                    }),
                RaisedButton(
                  onPressed: () {
                    selectVideos();
                  },
                  child: Text("选择视频"),
                ),

                InkWell(
                    onTap: (){
                      ImagePickers.previewImage("http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg");
                    },
                    child: Image.network("http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg",fit: BoxFit.cover,width: 100,height: 100,)),
                RaisedButton(
                  onPressed: () {
                    Future<String> future = ImagePickers.saveImageToGallery("http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg");
                    future.then((path){
                      print("保存图片路径:"+ path);
                    });
                  },
                  child: Text("保存网络图片"),
                ),
                dataImagePath == "" ? Container():GestureDetector(onTap: (){
                  ImagePickers.previewImage(dataImagePath);
                },child: Image.file(File(dataImagePath),fit: BoxFit.cover,width: 100,height: 100,)),
                RaisedButton(
                  onPressed: () async {

                    RenderRepaintBoundary boundary = globalKey.currentContext.findRenderObject();
                    ui.Image image = await boundary.toImage(pixelRatio: 3);
                    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
                    Uint8List data = byteData.buffer.asUint8List();

                    dataImagePath = await ImagePickers.saveByteDataImageToGallery(data,);

                    print("保存截屏图片 = "+ dataImagePath);
                    setState(() {

                    });
                  },
                  child: Text("保存截屏图片"),
                ),

                RaisedButton(
                  onPressed: () {
                    Future<String> future = ImagePickers.saveVideoToGallery("http://vd4.bdstatic.com/mda-jbmn50510sid5yx5/sc/mda-jbmn50510sid5yx5.mp4");
                    future.then((path){
                      print("视频保存成功");
                    });
                  },
                  child: Text("保存视频"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
为了在Flutter中实现图片上传,你可以使用`image_picker`和`dio`插件来调用系统相册和相机,并将选中的图片上传到服务器。 首先,你需要在Flutter项目的`pubspec.yaml`文件中添加`image_picker`和`dio`插件的依赖。 接下来,你可以使用`image_picker`插件的`getImage`方法来调用系统相册或相机,例如: ``` import 'package:image_picker/image_picker.dart'; final picker = ImagePicker(); // 调用相册 final pickedFile = await picker.getImage(source: ImageSource.gallery); // 调用相机 final pickedFile = await picker.getImage(source: ImageSource.camera); ``` 请注意,如果你需要支持多选图片,你需要在`pub.dev`上查找其他插件。 一旦你选择了图片,你可以使用`dio`插件将图片上传到服务器,例如: ``` import 'package:dio/dio.dart'; final dio = Dio(); FormData formData = FormData.fromMap({ 'file': await MultipartFile.fromFile(pickedFile.path), }); Response response = await dio.post('YOUR_UPLOAD_URL', data: formData); ``` 这里的`YOUR_UPLOAD_URL`是你的图片上传接口的URL,你需要根据实际情况进行替换。 以上是在Flutter上传图片的基本方法,你可以根据实际需求进行更多的定制和处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [flutter基础:调用图库及图片上传](https://blog.csdn.net/weixin_40652755/article/details/109724270)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值