Flutter Web上传图片到Firebase Storage出现404未知错误如何解决？

问题场景 #

在Flutter Web环境下开发图片上传至Firebase Storage的功能，参考多份公开教程编写代码后始终触发相同报错，项目引入的依赖包括：firebase、path、image_picker_web、mime_type。

相关配置与代码 #

上传功能代码 #

pickImageFromGallery() async {
  imageFile = await ImagePickerWeb.getImageInfo;
  setState(() {
    _image = imageFile!.fileName!;
  });
}

Future<void> uploadFile(
    MediaInfo mediaInfo, String ref, String fileName) async {
  try {
    String mimeType = mime(path.basename(mediaInfo.fileName!))!;

    final String extension = extensionFromMime(mimeType)!;

    var metadata = fb.UploadMetadata(
      contentType: mimeType,
    );

    fb.StorageReference storageReference =
        fb.storage().ref('images').child('$fileName.$extension');

    fb.UploadTaskSnapshot uploadTaskSnapshot =
        await storageReference.put(mediaInfo.data, metadata).future;

    Uri imageUri = await uploadTaskSnapshot.ref.getDownloadURL();
    setState(() {
      _imageURL = imageUri.toString();
    });
  } catch (e) {
    setState(() {
      _imageURL = e.toString();
    });
  }
}

Storage公共访问规则配置 #

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

报错信息 #

FirebaseError: Firebase Storage: An unknown error occurred, please check the error payload for server response.
{
  "error": {
    "code": 404,
    "message": "Not Found."
  }
} (storage/unknown)

解决方案 #

问题根源为StorageReference初始化时未指定对应存储桶路径，导致请求找不到目标资源，将StorageReference初始化代码修改为如下格式即可：

fb.StorageReference storageReference = fb.storage().refFromURL('gs://storageBucket/').child('$fileName.$extension');

注意：需将代码中的storageBucket替换为Firebase Storage控制台中显示的对应存储桶名称。

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