uni-app 拍照上传 + 离线缓存实现方案

背景起因

在近期项目中，事业部提出了一个 离线盘点任务 的需求，要求在弱网或无网环境下依然可以完成盘点记录，并在恢复网络后自动上传数据。
本篇只记录其中设计并实现的 拍照、离线缓存、联网后上传 功能，作为技术笔记备忘。

实现目标

✅ 离线或弱网状态下可拍照
✅ 拍照后图片转换为 base64 并本地保存
✅ 网络恢复后自动上传缓存图片
✅ 上传成功后清理本地缓存

技术方案

1️⃣ 拍照：调用相机获取临时路径或文件
2️⃣ 转换：将图片文件转 base64
3️⃣ 存储：本地持久化数据（如 plus.storage 或 uni.setStorage）
4️⃣ 监听：通过 webviewBridge.onNetworkStatusChange 监听网络状态
5️⃣ 上传：统一提交缓存数据到服务器

核心代码实现

拍照并缓存

async onStartUpload() {
  if (isAndroidLE10()) {
    try {
      const camera = plus.camera.getCamera();
      camera.captureImage(
        (path) => {
          plus.io.resolveLocalFileSystemURL(path, (entry) => {
            entry.file((file) => {
              const reader = new plus.io.FileReader();
              reader.onloadend = (evt) => {
                const base64Data = evt.target.result;
                this.cacheFile(base64Data);
              };
              reader.readAsDataURL(file);
            }, (err) => console.error("读取文件失败：", err.message));
          }, (err) => console.error("解析路径失败：", err.message));
        },
        (err) => console.error("拍照失败：", err.message)
      );
    } catch (err) {
      console.warn("请使用手机操作");
    }
  } else {
    uni.chooseImage({
      count: 1,
      sizeType: ["compressed"],
      success: async (res) => {
        const base64Data = await pathToBase64(res.tempFilePaths[0]);
        this.cacheFile(base64Data);
      },
      fail: (err) => console.error("调取相机失败：", err)
    });
  }
},

cacheFile(base64Data) {
  this.formData.files.push({
    base64: base64Data,
    key: Date.now(),
    name: Date.now().toString(),
    fileUrl: "",
    synced: false
  });
  console.log("图片已缓存");
}

初始化环境监听网络

initEnv() {
  return new Promise((resolve) => {
    const setupNetwork = () => {
      window.webviewBridge.getNetworkStatus((status) => {
        console.log("当前网络状态：", status);
        // 可触发离线数据提交
      });

      window.webviewBridge.onNetworkStatusChange((status) => {
        console.log("网络状态变化：", status);
        // 可触发离线数据提交
      });

      resolve();
    };

    if (window.webviewBridge) {
      setupNetwork();
    } else {
      const onReady = () => {
        setupNetwork();
        document.removeEventListener("WebviewBridgeReady", onReady);
      };
      document.addEventListener("WebviewBridgeReady", onReady);
    }
  });
}

注意事项

• 图片体积：base64 会显著增大图片体积，建议在拍照时尽量压缩（可选 compressed 模式，或压缩分辨率）。

• 存储空间：需要定期清理已上传数据，防止缓存累积导致存储空间不足。

• 兼容性：低版本 Android（尤其是工业平板等设备）可能对 uni.chooseImage 或相机调用支持不完整，需要额外兼容方案。

• 数据持久化：由于本地存储（如 plus.storage、uni.setStorage）不支持文件流，所以必须用 base64 或文件路径方案保存图片。