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

Posted 2023-03-15

【中文标题】Array.includes 在 html 文件上传和 localforage 中无法正常工作

【英文标题】：Array.includes not working as expected with html file upload and localforage

【发布时间】：2020-03-03 13:46:29

【问题描述】：

所以基本上我正在制作一个网站，允许用户上传 .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 数据不会改变，这是我所期望的，但是当我刷新页面时，并且然后再次上传a.txt，相同的对象被存储并显示在开发工具中两次，如果我重新加载页面并上传相同的文件，这会继续增加。

我想知道我做错了什么或者有没有可能的解决方法？

【参考方案1】：

问题是两个具有相同内容的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()，它代表所选文件的路径，而不是文件本身。如果路径不是您想要的，您还可以计算文件内容哈希。