上载多个图像并将其保存到javascript中的localStorage

我正在尝试为我的web应用程序创建一个功能，允许用户上传多个图像作为博客文章的一部分，然后在显示所有博客文章列表的页面上查看它们。我试图做的是，允许用户上传多个图像并将这些图像保存到本地存储。目前，我正在浏览用户上传的所有图像文件，然后在每个文件中添加一个新的文件阅读器。为了将它们添加到本地存储，我知道我必须使每个图像的键值不同（即img1=第一个图像，img2=第二个图像，等等）。根据下面的代码，我正在使用for循环更改上载的每个图像的键值，并将其设置为

img${I}

但是，当我尝试在每个fileReader组件上添加一个“load”事件侦听器来读取每个图像文件，以便将其保存到localStorage上时，因为它是一个“load”事件，“I”的值是不同的。因此，我只能保存已上载的最终图像（即img3）。我假设这是由一个“加载”事件中的代码引起的，这样它将只考虑所有文件加载时的最后一个“i”值。有办法解决这个问题吗？我们非常感谢任何朝着正确方向提供的帮助。我试图用纯javascript实现这一点，所以请不要使用jquery。多谢各位

HTML

Javascript

const fileSelector=document.getElementById('filetag');
const display = document.getElementById("preview");

fileSelector.addEventListener('change',(e)=>{
    //gets all the files uploaded
    let fileList = e.target.files;
    console.log(fileList)

    for(i=0;i<fileList.length;i++){
        //add a new fileReader for each element
        let reader = new FileReader();

        reader.addEventListener("load", () =>{  
            //store each uploaded image into localStorage
                localStorage.setItem(`img${i}`,reader.result)
                console.log(i)
        })
        reader.readAsDataURL(fileList[i]);
    }
})

constfileselector=document.getElementById（'filetag'）；
const display=document.getElementById（“预览”）；
fileSelector.addEventListener（'change'，（e）=>{
//获取上载的所有文件
让fileList=e.target.files；
console.log（文件列表）
对于（i=0；i{
//将每个上载的图像存储到localStorage中
setItem（`img${i}`，reader.result）
控制台日志（i）
})
reader.readAsDataURL（文件列表[i]）；
}
})

首先，我认为您不应该为此使用本地存储。此外，本地存储空间有限。如果您有一个后端，那么这些图像应该保存在服务器中，然后像任何普通网站一样使用URL加载它们

无论如何，我回答你的问题。不要使用数组（索引也有问题），而是将其转换为对象，然后使用对象键：

let fileList = e.target.files;
let files = {};
let index = 0;
for(let file of files) {
    files[index] = file;
    index ++;
}

// Now iterate object instead of array
Object.keys(files).forEach( key => {

     let reader = new FileReader();

     reader.addEventListener("load", () =>{  
         localStorage.setItem(`img${key}`,reader.result)
     })
     reader.readAsDataURL(files[key]);

});

---

本地存储最大大小为10mb，我建议您不要在本地存储上保存用户图像非常感谢您的回复！我想我应该提到一件关于代码的小事情，“文件”实际上是不可编辑的，因为它是空的，但是我循环了“文件列表”，其中包含了所有上传的文件，它工作得很好。再次感谢你。

let fileList = e.target.files;
let files = {};
let index = 0;
for(let file of files) {
    files[index] = file;
    index ++;
}

// Now iterate object instead of array
Object.keys(files).forEach( key => {

     let reader = new FileReader();

     reader.addEventListener("load", () =>{  
         localStorage.setItem(`img${key}`,reader.result)
     })
     reader.readAsDataURL(files[key]);

});