将表单数据保存到 IndexedDB

wvt8vs2t 于 2022-12-09 发布在 IndexedDB

关注(0)|答案(2)|浏览(311)

下面的代码是执行最后一个操作将数据保存到目标DB的代码。

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获取它并将其发送到服务器进行永久存储。我需要一些想法。我试过一些谷歌搜索，但我没有看到任何直接回答以下问题的答案。我正在使用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;
}

indexeddb

来源：https://stackoverflow.com/questions/66031979/save-formdata-to-indexdb

2条答案

按热度按时间

fdbelqdn1#

您可以通过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中，这样会更干净...

赞(0）回复(0）举报 2022-12-09

aamkag612#

据我所知，你不能直接将任何FormData存储到IndexedDB中。在我的例子中，我不得不为一个离线应用程序实现照片上传。我将图片以base64格式与一些其他数据一起保存到IndexedDB中，然后在互联网连接恢复后将它们上传到服务器上。

赞(0）回复(0）举报 2022-12-09