flutter 使用image_picker上传图片

第一步：封装，可以单独放在一个文件里可以直接复制


//选择图片函数
    /*拍照*/
    HspTakePhoto() async {
     var image = await ImagePicker.pickImage(source: ImageSource.camera,maxWidth: 640,maxHeight: 480);//限制拍照图片的大小
     return image;
    }

    /*相册*/
    HspOpenGallery() async {
      var image = await ImagePicker.pickImage(source: ImageSource.gallery);
      return image;
    }

 /*选择图片底部弹框*/
showModalBottomSheet(context: context, builder: (BuildContext context){
                return HspPickerImagePanel();
              });

              */
class HspPickerImagePanel extends StatefulWidget {

  Function  hspOnchange;
  HspPickerImagePanel({
    Key key,
    this.hspOnchange
});

  @override
  _HspPickerImagePanelState createState() => _HspPickerImagePanelState();
}

class _HspPickerImagePanelState extends State<HspPickerImagePanel> {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: HspSize.setRpx(750),
      height: HspSize.setRpx(300),
      color: Colors.white,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          InkWell(
            child: Text("相册"),
            onTap: ()async{
              var _url= await HspOpenGallery();
              await widget.hspOnchange(_url);
            },
          ),
          InkWell(
            child: Text("拍照"),
            onTap: ()async{
              var _url= await HspTakePhoto();
              await widget.hspOnchange(_url);
            },
          ),
        ],
      ),
    );
  }
}

第二步：打开底部弹框

在这里插入图片描述
调用showModalBottomSheet打开底部弹框，return第一步的HspPickerImagePanel(),val值就是返回的本地图片的地址，然后可以处理使用dio上传，
具体可以参考这篇文章https://blog.csdn.net/codekxx/article/details/101770516

注意上传图片的大小可能汇报dio error 413错误，原因是图片大小超过服务器的设置了，使用pickImage的maxWidth和maxHeigth可以限制图片大小

本文链接：https://blog.csdn.net/qq_42944436/article/details/108258063

智能推荐

Flutter 图片 Image 容器组件详解

Flutter 图片 Image 容器组件 Flutter 基础组件 Image 图片容器组件详情使用介绍 Flutter Image 组件介绍引入图片的几种方式： Image.asset: 加载资源图片，就是加载项目资源目录中的图片,加入图片后会增大打包的包体体积，用的是相对路径。 Image.network: 网络资源图片，意思就是你需要加入一段http://xxxx.xxx的这样的网络路径...

Flutter组件学习（4）图片Image

介绍关于Flutter图片的加载有多种形式方法释义 Image() 从ImageProvider中获取图片，从本质上看，下面的几个方法都是他的具体实现。 Image.asset(String name) 从AssetBundler中获取图片 Image.network(String src) 显示网络图片 Image.file(File file) 从File中获取图片 Ima...

Flutter 常用Widget-图片Image

Flutter中，加载并显示图片使用的是Image组件。我们先来看下这个构造函数： Image的构造参数有一下几种分别是： Image:从Provider获取图像 Image.asset:加载资源图片 Image.file:加载本地图片文件 Image.network:记载网络图片 Image.memory:加载Uint8List资源图片我们接下来看一下如何使用我们加载了一张网络图片。其他的使...

Flutter Widgets: Image

介绍 Image, 图片显示Widget, 和Android ImageView相似，但是从实际使用的方法上看，与常用的图片加载库，如Picasso，Glide等相似，支持本地图片，资源图片，网络图片等加载方式。类结构构造方法方式解释 Image() 通用方法，使用ImageProvider实现，如下方法本质上也是使用的这个方法 Image.asset 加载资源图片 Image.file ...

Flutter学习之image

这里的image组件照例是放在Container组件当中，在Container中放一个child，new一个Image，Image有四个方法，assert()，memory()，file()，network(最常用)，就是存储在网络上的图片。Image里有几个重要的属性 fit: BoxFit.fitHeight() Y轴填充其他几个方法字面意思 repeat: ImageRepeat.repe...

flutter 使用image_picker上传图片

智能推荐

猜你喜欢