将 FormData 保存到 Indexdb

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 中获取它并将其发送到服务器进行永久存储。 我需要一些想法。 我尝试了一些谷歌，但我没有看到以下问题的任何直接答案。 我正在使用idb npm 插件。 下面的更新 function 我将使用 to 作为与数据库对话的接口。

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

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

Answer 2

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