flutter firebase 图片上传需要时间获取文件 url

Question

我正在尝试将图像上传到云 firestore 和 firebase 存储。 我将图像 url 保存在一个名为imgUrl的变量中，该变量稍后在一个名为addIntervention()的 function 中传递。 问题是上传任务需要很少的时间，所以如果我上传并直接单击保存按钮， imgUrl将具有 null 值，因为图像仍在上传。

这是我的代码：

IconButton(
                        icon: Icon(
                          Icons.image,
                          color: Palette.primaryColor,
                        ),
                        onPressed: () async {
                          ImagePicker imagePicker = ImagePicker();
                          XFile? file = await imagePicker.pickImage(
                              source: ImageSource.gallery);

                          if (file == null) return;

                          Reference referenceRoot =
                              FirebaseStorage.instance.ref();
                          Reference dirImages =
                              referenceRoot.child("iv_images");
                          Reference imgToUpload = dirImages.child(file.name);

                          try {
                            await imgToUpload.putFile(File(file.path));

                            var x = imgUrl = await imgToUpload.getDownloadURL();
                            imgUrl = x;
                          } catch (e) {}
                        },
                      ),

对于按钮，我采用了这个片段：

if (imgUrl.isEmpty) {
                                 QuickAlert.show(
                                    context: context,
                                    type: QuickAlertType.error,
                                    title: 'Error',
                                    text:
                                        'Please upload an image');
                              } else {
                                await addIntervention(
                                    imgUrl,
                                    etatLabel,
                                    numIntv,
                                    intervention,
                                    myPrice!,
                                    note,
                                    dateTime);

请注意，我也在使用 async/await 作为保存按钮，有什么办法可以解决这个问题吗？ 提前致谢。

Answer 1

您可以尝试以下提示：

1. 减少上传时间的第一件事是压缩图片，您不必压缩图片直到它变得模糊，但少量压缩会显着减少上传时间。 此外，如果用户选择了一张图像，那么他/她可能也想裁剪它。 因此，如果您也添加该功能会更好。

幸运的是，有一个名为image_cropper （链接）的 package，您可以使用它来裁剪和压缩图像。

2. 如果你不想显示任何加载指示器那么你可以直接将图像传递到下一个屏幕并在后台运行你的进程（这称为乐观更新），但是如果你想显示加载指示器那么你可以使用这个package叫做flutter_spinkit 。 它有各种各样的加载指示器，您会喜欢的。

3. 当用户单击按钮时，您可以在按钮本身上显示一个进度指示器，以指示已上传了多少百分比，必须在用户单击按钮之前上传。

在 firebase 中，你可以得到这样的百分比：

 Future getImage(BuildContext context) async {
    final picker = ImagePicker();
    final pickedFile = await picker.getImage(source: ImageSource.gallery);
    setState(() {
      _image = File(pickedFile.path);
    });
    StorageReference firebaseStorageRef = FirebaseStorage.instance.ref().child('profile/${Path.basename(_image.path)}}');
    StorageUploadTask uploadTask = firebaseStorageRef.putFile(_image);
    var dowurl = await (await uploadTask.onComplete).ref.getDownloadURL();   
     setState(() {    
       _imageURL = dowurl.toString();

     });

    print(_imageURL);
  } 

uploadTask.events.listen((event) {
      setState(() {
        _progress = event.snapshot.bytesTransferred.toDouble() /
            event.snapshot.totalByteCount.toDouble();
      });
    }).onError((error) {
      // do something to handle error
    });

然后你可以像这样显示进度：

Text('Uploading ${(_progress * 100).toStringAsFixed(2)} %')