将表单数据保存到 Indexeddb

Question

下面的代码是将数据保存到目标数据库的最终操作。

const onFileUpload = (e) => {
  const files = Array.from(e.target.files);
  const formData = new FormData();
  formData.append('attachable_type', attachableType);
  formData.append('attachable_id', attachableId);

  if (files.length > 0) {
    const file = files[0];
    formData.append('file', file);

    upload(dispatch, {
      body: formData,
    }).then(() => {});
  }
};

现在我正在构建一个离线应用程序，当没有互联网可用时，我想将此请求保存到 indexdb。我有整个设置。我只想知道如何将 FormData 实例保存到 indexdb，以便以后可以从 indexdb 获取它并将其发送到服务器以进行永久存储。我需要一些想法。我尝试了一些 google 但我没有看到以下问题的任何直接答案。我正在使用 idb npm 插件。下面的更新函数我将用作与数据库对话的接口。

export async function update(attrs) {
  const db = await createAppDB();

  const tx = db.transaction('attachments', 'readwrite');
  const store = tx.objectStore('attachments');

  store.put(attrs);

  await tx.done;
}

Answer 1

据我所知，您不能将任何 FormData 直接存储到 IndexedDB 中。就我而言，我必须为离线应用程序实现照片上传。我将图像和其他一些数据以 base64 格式保存到 IndexedDB 中，然后在互联网连接恢复后将它们上传到服务器上。

Answer 2

您可以通过 Body.formData() 方法提取 FormData，然后通过获取此 FormData 的条目检索其内容并将其存储到 IDB：

(async () => {
  // in ServiceWorker while disconnected
  const request = buildRequest();
  // extract the FormData
  const fd = await request.formData();
  const serialized = {
    url: request.url,
    method: request.method,
    mode: request.mode,
    body: [ ...fd ]
    // you may need more fields from request
  };
  // you can now store the entries in IDB
  // here we just log it
  console.log( "stored", serialized );

  // and to build back the Request
  const retrieved = { ...serialized };
  const new_body = new FormData();
  for( let [ key, value ] of retrieved.body ) {
    new_body.append( key, value );
  }
  retrieved.body = new_body;
  const new_request = new Request( retrieved );
  // fetch( new_request );
  // remember to remove from IDB to avoid posting it multiple times
  console.log( "sent", [...new_body] );
} )();


// returns the same kind of Request object a ServiceWorker would intercept,
// whose body is a FormData
function buildRequest() {
  const fd = new FormData();
  fd.append( "some-key", "some-data" );
  fd.append( "the-file", new Blob( [ "hey" ] ), "file.txt" );
  return new Request( "", { method: "POST", body: fd } );
}

很遗憾我们不能将 POST 个请求放入缓存 API，这样会干净很多...

将表单数据保存到 Indexeddb

Save FormData to Indexdb

javascript

indexeddb

service-worker