时间戳

首页 > 解决方案 > 上传多张图片并将它们保存到javascript中的localStorage

javascript - 上传多张图片并将它们保存到javascript中的localStorage

问题描述

我正在尝试为我的 Web 应用程序创建一个功能，允许用户上传多个图像作为博客文章的一部分，然后稍后在显示所有博客文章列表的页面上查看它们。我想要做的是，允许用户上传多个图像并将这些图像保存到 localStorage。目前我正在遍历用户上传的所有图像文件，然后为每个文件添加一个新的 fileReader。为了将它们添加到 localStorage，我知道我必须使每个图像的键值不同（即 img1=第一张图像，img2=第二张图像等）根据下面的代码，我正在更改键使用 for 循环上传的每个图像的值，并将其设置为img${i}.

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

HTML

<!--Upload images-->
    <input type="file" id="filetag" multiple accept=".jpg,.jpeg,.png,.gif">
    <img id="preview">

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]);
    }
})

标签： javascripthtml

解决方案

首先，我认为您不应该为此使用 LocalStorage。此外 LocalStorage 的大小是有限的。如果您有后端，则应将这些图像保存在服务器中，然后像任何普通网站一样使用 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]);

});

推荐阅读