Javascript 将FormData保存到Indexdb

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

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插件。我将使用下面的更新函数作为与db对话的接口

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;
}

---

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

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

（异步（）=>{
//断开连接时在ServiceWorker中
const request=buildRequest（）；
//提取表单数据
const fd=wait request.formData（）；
常量序列化={
url:request.url，
方法：request.method，
模式：request.mode，
正文：[……fd]
//您可能需要来自请求的更多字段
};
//现在可以将条目存储在IDB中
//在这里，我们只是记录它
日志（“存储”，序列化）；
//并重新构建请求
检索到的常量={…序列化}；
const new_body=new FormData（）；
for（让retrieved.body的[key，value]{
新的_body.append（键，值）；
}
retrieved.body=新的_body；
const new_request=新请求（已检索）；
//获取（新的请求）；
//记住从IDB中删除，以避免多次发布
log（“已发送”[…新的_body]）；
} )();
//返回ServiceWorker将拦截的相同类型的请求对象，
//谁的身体是FormData
函数buildRequest（）{
const fd=new FormData（）；
附加（“一些键”、“一些数据”）；
追加（“文件”，新Blob（[“嘿”]），“file.txt”）；
返回新请求（“，{method:“POST”，body:fd}）；
}

是的，我就是这样解决的。谢谢你的回答。