Blazor WebAssembly PWA离线存储用户拍摄照片并联网上传方案咨询

针对你遇到的离线场景下照片存储问题，以下是几个实用的解决方案：

1. 用IndexedDB存储照片二进制数据 #

IndexedDB是浏览器提供的大容量存储方案（通常配额远大于5MB，甚至可达GB级），适合存储照片这类大文件。Blazor中可以通过JS互操作或现成的封装库实现：

实现步骤： #

• 安装Blazored.IndexedDB库（封装好的IndexedDB操作组件）：

  Install-Package Blazored.IndexedDB
  

• 注册服务：

  builder.Services.AddBlazoredIndexedDB(config =>
  {
      config.DbName = "OfflinePhotoDb";
      config.Stores.Add(new StoreSchema { Name = "PendingPhotos", KeyPath = "Id", AutoIncrement = true });
  });
  

• 组件中实现存储与上传：

  @inject BlazoredIndexedDB.IDbFactory DbFactory
  <InputFile OnChange="HandlePhotoSelected" accept="image/*" />
  
  async Task HandlePhotoSelected(InputFileChangeEventArgs e)
  {
      var photoFile = e.File;
      using var db = await DbFactory.CreateDbAsync();
      // 将照片转成字节数组存储
      using var stream = photoFile.OpenReadStream();
      var memoryStream = new MemoryStream();
      await stream.CopyToAsync(memoryStream);
      var photoRecord = new 
      { 
          Id = Guid.NewGuid(), 
          FileName = photoFile.Name, 
          Data = memoryStream.ToArray(), 
          Uploaded = false,
          Timestamp = DateTime.UtcNow
      };
      await db.AddItemAsync("PendingPhotos", photoRecord);
  }
  
  // 联网时批量上传
  async Task UploadPendingPhotos()
  {
      using var db = await DbFactory.CreateDbAsync();
      var pendingPhotos = await db.GetItemsAsync<dynamic>("PendingPhotos");
      foreach (var photo in pendingPhotos.Where(p => !p.Uploaded))
      {
          // 调用你的上传API，传入photo.Data和photo.FileName
          bool uploadSuccess = await UploadPhotoToServer(photo.Data, photo.FileName);
          if (uploadSuccess)
          {
              photo.Uploaded = true;
              await db.UpdateItemAsync("PendingPhotos", photo);
              // 可选：上传成功后删除本地记录释放空间
              // await db.DeleteItemAsync("PendingPhotos", photo.Id);
          }
      }
  }
  

2. 利用File System Access API存储到本地文件系统 #

现代浏览器支持的File System Access API允许PWA请求用户授权，直接读写本地文件系统的指定目录，适合需要用户可见离线文件的场景：

实现步骤（Blazor通过JS互调）： #

@inject IJSRuntime JS

<button @onclick="RequestDirectoryAccess">授权离线存储目录</button>
<InputFile OnChange="SavePhotoToLocalFileSystem" accept="image/*" />

async Task RequestDirectoryAccess()
{
    // 请求用户选择存储目录
    var directoryHandle = await JS.InvokeAsync<IJSObjectReference>("window.showDirectoryPicker");
    // 将目录句柄序列化后存入IndexedDB，下次访问无需重复授权
    var handleJson = await JS.InvokeAsync<string>("JSON.stringify", directoryHandle);
    await SaveToIndexedDB("StorageHandles", new { Id = "PhotoDir", Handle = handleJson });
}

async Task SavePhotoToLocalFileSystem(InputFileChangeEventArgs e)
{
    var photoFile = e.File;
    var storedHandleJson = await GetFromIndexedDB("StorageHandles", "PhotoDir");
    var directoryHandle = await JS.InvokeAsync<IJSObjectReference>("JSON.parse", storedHandleJson.Handle);
    // 创建/获取文件句柄
    var fileHandle = await directoryHandle.InvokeAsync<IJSObjectReference>("getFileHandle", photoFile.Name, new { create = true });
    // 写入照片数据
    var writableStream = await fileHandle.InvokeAsync<IJSObjectReference>("createWritable");
    using var stream = photoFile.OpenReadStream();
    var bytes = new byte[stream.Length];
    await stream.ReadAsync(bytes, 0, bytes.Length);
    await writableStream.InvokeVoidAsync("write", bytes);
    await writableStream.InvokeVoidAsync("close");
}

注意：该API需要HTTPS环境，部分移动端浏览器兼容性需验证，适合对文件可见性有要求的场景。

3. 结合Service Worker的Cache Storage临时存储 #

Cache Storage原本用于缓存静态资源，但也可存储动态生成的Blob对象，适合和PWA的离线缓存策略集成：

实现思路： #

• 拍摄照片后转成Blob，通过JS互调调用Service Worker的caches.open()方法存入指定缓存
• 联网时从缓存中取出Blob，上传到服务器后删除缓存项
• 示例JS代码（可嵌入Blazor的wwwroot）：

async function savePhotoToCache(photoBlob, fileName) {
    const cache = await caches.open('offline-photos');
    await cache.put(`/offline-photos/${fileName}`, new Response(photoBlob));
}

async function getPendingPhotosFromCache() {
    const cache = await caches.open('offline-photos');
    const keys = await cache.keys();
    return Promise.all(keys.map(key => cache.match(key)));
}

Blazor中通过IJSRuntime调用这些方法即可。

关于手机图库访问的说明 #

出于安全限制，PWA无法直接读取手机图库的文件路径或访问本地文件系统的私有目录。正确的做法是通过<InputFile>组件（或Blazor的InputFile）让用户主动选择图库中的照片，获取文件对象后转成Blob/字节数组存入上述存储方案，这是浏览器允许的合规方式。

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