如何在Flutter应用中通过ImagePicker实现多图上传功能

1. 调整变量定义 #

把原来的单个图片变量改成列表，用来存储选中的多张图片：

List<File> _images = []; // 替换原来的File _image;

2. 修改图片选择方法 #

替换原来的_getImage方法，改用pickMultiImage实现多图选择：

Future _getMultiImages() async {
  List<XFile>? pickedImages = await ImagePicker().pickMultiImage(
    maxWidth: 1000,
    maxHeight: 1000,
  );

  if (pickedImages != null) {
    setState(() {
      _images = pickedImages.map((xFile) => File(xFile.path)).toList();
    });
  }
}

注：新版image_picker返回的是XFile类型，需要转成File才能用于上传

3. 改造上传逻辑 #

修改_uploadFile方法，循环上传所有选中的图片，收集下载URL后批量存入Firestore：

Future _uploadFile(BuildContext context) async {
  if (_images.isNotEmpty) {
    List<String> downloadUrls = [];

    // 循环上传每张图片
    for (var image in _images) {
      final firebaseStorageRef = FirebaseStorage.instance
          .ref()
          .child('post')
          .child('${DateTime.now().millisecondsSinceEpoch}_${image.path.split('/').last}');

      final task = firebaseStorageRef.putFile(
        image,
        StorageMetadata(contentType: 'image/png'),
      );

      final storageTaskSnapshot = await task.onComplete;
      final downloadUrl = await storageTaskSnapshot.ref.getDownloadURL();
      downloadUrls.add(downloadUrl);
    }

    // 将图片URL列表存入Firestore
    await Firestore.instance.collection('post').add({
      'contents': textEditingController.text,
      'displayName': widget.user.displayName,
      'email': widget.user.email,
      'photoUrls': downloadUrls, // 用数组存储多张图片URL
      'userPhotoUrl': widget.user.photoUrl,
    });
  }
}

4. 保留原有生命周期方法 #

dispose方法无需修改，继续保留：

@override
void dispose() {
  textEditingController.dispose();
  super.dispose();
}

使用说明 #

调用_getMultiImages()触发多图选择，选完后调用_uploadFile(context)即可完成多图上传，Firestore中会以数组形式存储所有图片的下载链接。

内容的提问来源于stack exchange，提问作者Yooni