Uppy 金毛寻回犬插件

@uppy/golden-retriever 插件会在浏览器缓存中保存选定的文件，如果浏览器崩溃或用户意外关闭标签页，Uppy 可以恢复所有内容并继续上传，就像什么都没发生过一样。你可以在我们的博客上了解更多相关信息。

金毛寻回犬使用三种浏览器数据存储方法：

LocalStorage 仅用于存储文件元数据和 Uppy 状态信息。
IndexedDB 用于存储小文件，通常在 5MiB 以下。
Service Worker（可选）用于所有文件，因为与 IndexedDB 不同，Service Worker 可以保留大文件的引用。然而，Service Worker 的存储相当短暂，不会在浏览器崩溃或重启后持久化。但它对于意外刷新或关闭标签页的情况工作得很好。

恢复时，插件首先从 LocalStorage 中恢复状态，然后检查 IndexedDB 和 ServiceWorker 两个文件存储，合并结果。

如果某些文件的恢复失败，它们将在 Dashboard UI 中被标记为“幽灵”，并显示一条消息和按钮，提示用户重新选择这些文件。

查看 MDN 上的存储配额，了解根据设备和浏览器可以存储多少数据。

何时使用此插件？

当你想要为用户选择的文件提供额外保险时。如果你觉得用户可能会花一些时间挑选文件、修改描述等，如果出现意外，他们可能不愿意重新做一遍。另一个用例可能是当用户可能希望选择几个文件，离开去做其他事情，然后回到相同的文件选择时。

安装

npm
```
npm install @uppy/golden-retriever
```
Shell
yarn
```
yarn add @uppy/golden-retriever
```
Shell

CDN

警告

此捆绑包包含了大部分Uppy插件，因此不建议在生产环境中使用此方法，因为尽管您可能仅仅用到其中一小部分插件，但用户却需要下载全部插件。
然而，这对于加速您的开发环境非常有帮助，所以在起步阶段，请放心使用它来提升开发速度。


<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v3.27.3/uppy.min.css" rel="stylesheet">

<!-- 2. Initialize -->
<div id="uppy"></div>

<script type="module">
    import { Uppy, GoldenRetriever } from "https://releases.transloadit.com/uppy/v3.27.3/uppy.min.mjs"
    new Uppy().use(GoldenRetriever)
</script>

使用


import Uppy from "@uppy/core";
import Dashboard from "@uppy/dashboard";
import GoldenRetriever from "@uppy/golden-retriever";

new Uppy()
  .use(Dashboard, { inline: true, target: "#dashboard" })
  .use(GoldenRetriever);

默认情况下，金毛寻回犬只会使用 IndexedDB 存储，这足以处理 5 MiB 以下的文件。Service Worker 是可选的，需要设置。

启用 Service Worker

启用 Service Worker 存储后，金毛寻回犬将能够临时存储大文件的引用。

与 Uppy GoldenRetriever 的服务工作者一起打包你自己的 sw.js 服务工作者文件。

提示

对于 Webpack，可以查看 serviceworker-webpack-plugin 。


import("@uppy/golden-retriever/lib/ServiceWorker");

在你的应用入口点注册它：


// 你的app.js入口点
uppy.use(GoldenRetriever, { serviceWorker: true });

if ("serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/sw.js") // 你打包好的服务工作者路径，包含GoldenRetriever服务工作者
    .then((registration) => {
      console.log(
        "ServiceWorker registration successful with scope: ",
        registration.scope
      );
    })
    .catch((error) => {
      console.log(`Registration failed with ${error}`);
    });
}

完成了，祝你愉快地恢复！

API

选项

`id`

此插件的唯一标识符（ string，默认：'GoldenRetriever' ）。

`expires`

存储元数据和文件的时间长度。用于 LocalStorage 和 IndexedDB（ number，默认：24 * 60 * 60 * 1000 // 24 小时）。

`serviceWorker`

是否启用 Service Worker 存储（ boolean，默认：false ）。

Uppy 金毛寻回犬插件

何时使用此插件？

安装

使用

启用 Service Worker

API

选项

id

expires

serviceWorker

在本文档中

`id`

`expires`

`serviceWorker`