离线上传文件至Firebase Cloud Storage触发自定义代码的解决方案

Firebase Cloud Storage的uploadBytesResumable接口默认内置了离线重试机制，断网时任务会在内部挂起自动重试，既不会触发paused状态，也不会触发错误回调，因此无法直接通过原生的state_changed事件捕获离线场景。

标准实现方式 #

需要结合浏览器网络状态API主动控制上传任务的状态，触发你需要的离线分支逻辑，修改后的示例代码如下：

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/rivers.jpg');
// 替换为实际的文件对象
const file = null;

const uploadTask = uploadBytesResumable(storageRef, file);

// 新增：监听网络状态变化，主动控制上传任务
window.addEventListener('offline', () => {
  // 离线时主动暂停任务，会触发state_changed的paused状态
  uploadTask.pause();
});

window.addEventListener('online', () => {
  // 网络恢复时主动恢复任务，会触发state_changed的running状态
  uploadTask.resume();
});

uploadTask.on('state_changed', 
  (snapshot) => {
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        // 这里写离线场景逻辑：将文件存入本地存储、记录上传进度等
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // 处理真正的上传错误：比如权限不足、文件不存在、存储空间不足等
  }, 
  () => {
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);

补充说明 #

如果需要覆盖弱网（未完全断开网络但进度长时间无更新）的场景，可以自定义超时定时器：每收到一次进度更新就重置定时器，定时器超时后主动调用uploadTask.pause()触发离线逻辑即可。

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