时间戳

首页 > 解决方案 > Array.includes 在 html 文件上传和 localforage 中无法正常工作

javascript - Array.includes 在 html 文件上传和 localforage 中无法正常工作

问题描述

所以基本上我正在制作一个网站，允许用户上传 .txt 文件并在使用移位密码对其进行加密后返回以供下载。

我有以下 HTML 代码

<div class="file-inp mainscreen-row-element level-2 enc">
   Upload Text File
</div>
<input type="file" accept=".txt" id="inp-elem" hidden />

如果它不存在，我会将一些数据存储在 indexedDB 中

localforage.getItem("encrypton-caesar-cipher").then(d => {
  if (d == null) {
    localforage.setItem("encrypton-caesar-cipher", {
      enc: { inp: { text: [], files: [] }, out: { text: [], files: [] } },
      dec: { inp: { text: [], files: [] }, out: { text: [], files: [] } },
      ai: { inp: { text: [], files: [] }, out: { text: [], files: [] } }
    });
  }
});

我的 javascript 包含此代码

$(".file-inp").on("click", e => {
  $("#inp-elem").trigger("click");
  $("#inp-elem").on("change", () => {
    const f = $("#inp-elem").prop("files");
      localforage.getItem("encrypton-caesar-cipher").then(d => {
        if (!(d.enc.inp.files.includes(f))) {
          d.enc.inp.files.push(f);
          localforage.setItem("encrypton-caesar-cipher", d);
        }
      });
  });
});

因此，当用户上传文件时，我在 localForage 的帮助下将对象存储在 indexedDB 中，并且我有这个条件

if (!(d.enc.inp.files.includes(f)))

因为我想确保我不会重复存储同一个对象

现在，如果我上传一个文件 a.txt 并转到开发工具，它会显示在那里，如果再次上传，我的 indexedDB 数据不会改变，这是我所期望的，但是当我刷新页面时，然后上传.txt 再次，相同的对象被存储并显示在开发工具中两次，如果我重新加载页面并上传相同的文件，这会继续增加。

我想知道我做错了什么还是有可能的解决方法？

标签： javascripthtmlarraysfile-uploadlocalforage

解决方案

问题是两个具有相同内容的 javascript 对象不被认为是相等的：

const object1 = {foo: 'bar'};
const object2 = {foo: 'bar'};
object1 == object2 // false
// but
object1 == object1 // true

但这适用于像字符串这样的原语：

const string1 = 'foo';
const string2 = 'foo';
string1 == string2 // true

也许你想要的是使用$("#inp-elem").val()它代表所选文件的路径而不是文件本身。如果路径不是您想要的，您还可以计算文件内容哈希。

推荐阅读