實作效果如下

接下來看看該怎么用，

匯入依賴包

版本號可以到puv.dev上查找最新的替換上去，

dependencies:
  multi_image_picker: ^4.6.1

multi_image_picker的使用

使用這個插件也很簡單，首先匯入包

import 'package:multi_image_picker/multi_image_picker.dart';

接著就訪問相冊選擇圖片，

• 先定義一個List<Asset> resultList用于保存選擇后的圖片資訊，
• MultiImagePicker.pickImages的回傳型別是List<Asset>
• 相關引數使用看代碼中的注釋

  // 選擇照片并上傳
  Future<void> uploadImages() async {
    if (resultList == null) {
      resultList = List<Asset>();
    }
    try {
      var tmp = await MultiImagePicker.pickImages(
        // 可選引數， 若resultList不為空，再次打開選擇界面的適合，可以顯示之前選中的圖片資訊， 
        selectedAssets: resultList,
        // 選擇圖片的最大數量
        maxImages: 9,
        // 是否支持拍照
        enableCamera: true,
        materialOptions: MaterialOptions(
          // 顯示所有照片，值為 false 時顯示相冊
            startInAllView: false,
            allViewTitle: '所有照片',
            actionBarColor: '#2196F3',
            textOnNothingSelected: '沒有選擇照片'),
      );
      if (tmp.length != 0) {
        resultList = tmp;
        setState(() {});
      }
    } on Exception catch (e) {
      e.toString();
    }
  }

這樣選擇圖片的功能就以及做好了，

顯示圖片

接下來實作顯示圖片的功能，

使用gridview顯示，

因為選擇后的圖片是一個Asset型別，所以可以使用 AssetThumb顯示圖片

AssetThumb(
    asset: resultList[index],
    width: 300,
    height: 300,
)

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
    title: Text('發動態'),
    actions: [
      IconButton(
          icon: Icon(Icons.send),
          onPressed: () async {


          })
    ],
      ),
      body: Container(
    padding: EdgeInsets.all(5),
    child: ListView(
      children: [
        TextField(
          controller: _controller,
          decoration: InputDecoration(
              border: OutlineInputBorder(), hintText: '說點什么……'),
          maxLines: 7,
        ),
        Row(
          children: [
            RaisedButton(
              onPressed: () {
                uploadImages();
              },
              child: Text('選擇圖片'),
            ),
          ],
        ),
        Container(
          width: double.infinity,
          height: 1000,
          child: GridView.builder(
            padding: EdgeInsets.all(0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 2,
                mainAxisSpacing: 2),
            itemBuilder: (BuildContext context, int index) {
              return _createGridViewItem(
                  AssetThumb(
                    asset: resultList[index],
                    width: 300,
                    height: 300,
                  ),
                  index);
            },
            itemCount: resultList.length,
          ),
        )
      ],
    ),
      ),
    );
  } 

_createGridViewItem(widget, index) {
    return Container(
      height: 100,
      width: 100,
      padding: EdgeInsets.all(0),
      margin: EdgeInsets.all(0),
      child: Stack(
        children: [
          widget,
          Positioned(
            top: 0,
            right: 0,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  resultList.removeAt(index);
                });
              },
              child: Icon(
                Icons.close,
                color: Colors.grey,
              ),
            ),
          )
        ],
      ),
    );
  }

上傳圖片

匯入依賴dio

dependencies:  
  dio: ^3.0.10
  dio_log: ^1.3.5

dio中提供了檔案上傳的方式，具體可以去看官方檔案，

• MultipartFile 是Dio中用戶檔案上傳的類
• 如果一次性需要傳多個圖片，可以用一個List陣列保存

          List<MultipartFile> files = List();
					//  resultList就是之前獲取選擇圖片的List
              for (int i = 0; i < resultList.length; i++) {
                // 獲取 ByteData
                ByteData byteData = await resultList[i].getByteData();
                List<int> imageData = byteData.buffer.asUint8List();

                MultipartFile multipartFile = MultipartFile.fromBytes(
                  imageData,
                  // 檔案名
                  filename: 'some-file-name.jpg',
                  // 檔案型別
                  contentType: MediaType("image", "jpg"),
                );

                files.add(multipartFile);
              }

封裝到FormData里面，

• 這里的image就是后端介面中接收檔案的引數名，如果傳入的是一個陣列，則會自動加上[]

              FormData formData = FormData.fromMap({
                // 后端介面的引數名稱
                "image": files,
              });

之后就可以上傳了，

              HttpUtils.instance.post("/upload", formData,
                  success: (response) {
                      //這部分是對相應結果的處理，大家可以根據自己回傳的資料型別進行修改
                    if (response['code'] == 200) {
                      List list = response['data'];

                      for (var i = 0; i < list.length; i++) {
                        if (i != 0) urls += "￥";
                        urls += list[i];
                      }
                    }

                  });

可能遇到的問題

理論上使用multi_image_picker是不用管權限問題的，但是如果遇到了Permission denied的情況的話，則打開
android\app\src\main\AndroidManifest.xml這個檔案
然后加上這幾個權限

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.jxj4869.flutter_imagepick_demo">

    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.CAMERA" />

完整代碼已經上傳GitHubhttps://github.com/jiang4869/CSDNBlogCode/tree/master/flutter_imagepick_demo，喜歡的話可以start一些，這個demo是動態上傳界面，可以發送文字和圖片資訊，

拒絕白嫖，從點一鍵三連開始