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
yarn
yarn add @uppy/golden-retriever
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
)。