如何在没有任何数据库的情况下将用户上传的文件缓存在我的网站中

Posted 2023-03-04

技术标签:

【中文标题】如何在没有任何数据库的情况下将用户上传的文件缓存在我的网站中【英文标题】：How can I cache the uploaded file of the user in my website, without any database 【发布时间】：2022-01-11 01:36:13 【问题描述】：

我正在使用 pdfjs 库制作一个 pdf 阅读器网站，我想制作类似于这个网站 https://pdfviewer.softgateon.net/ 的东西，它也使用 pdfjs，虽然它太旧了，但是那个网站的一个好处是当我上传我的 pdf 文件，读完之后，我关闭浏览器，然后明天当我打开那个网站时，pdf 已经在我正在阅读的最后一页，我想为我的网站，但我不知道它是怎么做的，我的网站是用javascript做的，我上传到github页面上，https://smh6.github.io/PDFWIZ/

它的工作原理是，你上传你的文件，然后我删除主页 html，然后我添加阅读模式页面的 HTML，我可以在我的网站中获得该功能吗？它没有任何后端，它是纯 javascript

是否与我正在使用的主机有关，或者可以使用 javascript 完成？

【问题讨论】：

你可以使用客户端数据库，见npmjs.com/package/localforage @LawrenceCherone 谢谢，我会检查一下，顺便说一下，我提到的网站pdfviewer.softgateon.net 我在其中上传了一个 pdf，然后我关闭了浏览器，将该文件移动到另一个目录，然后当我再次打开浏览器时，它在页面上抛出了一个意外错误，这是怎么回事？它可能根本没有使用数据库吗？因为我移动文件时它坏了，我只是好奇那个网站是怎么做到的，你知道吗？不确定他们是如何做到的，我的建议是，当您添加存储在浏览器（IndexedDB、WebSQL）中的 pdf 文件时，然后 onload 将其拉出。您不能引用以前的文件输入，因为 js 代码无法提取用户计算机的某些内容，这是一种安全风险，因此您需要存储 blob 【参考方案1】：

正如评论中所说，添加 PDF 后，将其存储在客户端数据库中（如 localforage），该数据库会将 PDF 作为 blob 持久存储在存储中，然后在下次访问时将其加载回来再次渲染。

在线示例： https://localforage-pdf.glitch.me

基本示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title></title>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js"
      integrity="sha512-+BMamP0e7wn39JGL8nKAZ3yAQT2dL5oaXWr4ZYlTGkKOaoXM/Yj7c4oy50Ngz5yoUutAG17flueD4F6QpTlPng=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
  </head>
  <body>
    <div id="pdf"></div>

    <input type="file" onchange="loadPDF(this)" accept="application/pdf" />

    <button id="clearPDF">
      Remove PDF
    </button>

    <script>
      // clear and initial display
      document.getElementById("clearPDF").onclick = function() 
        localforage.removeItem("lastPDF");
        document.getElementById("pdf").style.display = "none";
      ;
      document.getElementById("pdf").style.display = "none";

      // render the pdf object, if you use a diff lib implement it here
      const renderPDF = function(src) 
        const resource = (window.URL || window.webkitURL).createObjectURL(
          new Blob([src],  type: "application/pdf" )
        );

        const object = document.createElement("object");
        object.setAttribute("data", resource);
        object.setAttribute("type", "application/pdf");
        object.setAttribute("width", "500");
        object.setAttribute("height", "678");

        const iframe = document.createElement("iframe");
        iframe.setAttribute("src", resource);
        iframe.setAttribute("width", "500");
        iframe.setAttribute("height", "678");
        iframe.innerHTML = "<p>This browser does not support PDF!</p>";

        object.append(iframe);

        document.getElementById("pdf").replaceChildren(object);

        // show it
        document.getElementById("pdf").style.display = "block";
      ;

      // load the PDF from file input, render then store in storage
      const loadPDF = elm => 
        const fr = new FileReader();
        fr.onload = () => 
          // render
          renderPDF(fr.result);

          // store
          localforage.setItem("lastPDF", fr.result);
        ;
        fr.readAsArrayBuffer(elm.files[0]);
      ;

      // load and render last stored pdf
      localforage.getItem("lastPDF", (err, value) => 
        if (err || !value) return;
        renderPDF(value);
      );
    </script>
  </body>
</html>

【讨论】：

感谢您的回答，但很遗憾，我认为我不能使用localForage，因为它的最大容量是5MB，但是我阅读的大多数pdf都超过了那个大小，我是如此渴望知道我提到的网站是如何做到这一点的:((我什至上传了 40MB 大小的 pdf，但是当我重新启动浏览器时它会记住它，它甚至与大小无关最大值要高得多，比如 2GB，请参阅***.com/questions/5692820/… 但它是在谈论 indexDB，对不起，我是 web 开发的菜鸟，localForage 和 indexDB 一样吗？是的，它是一个辅助库，它还支持 websql 和 localstorage 或 custom（您可以使用 ajax 在后端做一个 crud），我已经多次链接到它的文档，应该阅读他们 ;）。如果要存储在浏览器限制之上，则必须将文件存储在服务器端【参考方案2】：

您可以使用 cookie 来保存它。

这里应该放你用来打开文件的东西（路径、参数或其他）

var lastFile = document.cookie = "lastFile=file"

然后每次页面加载时，只要检查那个cookie是否存在，如果存在，打开文件。

if(lastFile)
     // open file

【讨论】：

这行不通，如果可以的话，那么一些邪恶的网站可能会从您的设备下载文件。除非您建议将 pdf 文件内容存储在 cookie 中，否则由于只能存储 4kb 那么使用localStorage应该会更好

以上是关于如何在没有任何数据库的情况下将用户上传的文件缓存在我的网站中的主要内容，如果未能解决你的问题，请参考以下文章