在前端开发中，实现图片上传功能并获取上传图片的路径，是一个常见的需求。尤其是当需要上传多张图片，并分别展示它们的地址时，掌握正确的方法至关重要。本文将详细介绍如何在 JS 中实现这一功能。

在 HTML 中创建一个文件上传元素，设置 multiple 属性，允许用户选择多张图片。例如：<input type="file" id="imageUpload" multiple>。

接下来，使用 JavaScript 监听文件上传事件。通过 addEventListener 方法，当用户选择图片后，触发相应的函数。代码如下：

const imageUpload = document.getElementById('imageUpload');
imageUpload.addEventListener('change', function(event) {
    const files = event.target.files;
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const reader = new FileReader();
        reader.onloadend = function() {
            const imgUrl = reader.result;
            // 这里的 imgUrl 就是每张图片的地址
            // 可以将其存储到数组中，或者直接展示在页面上
            const imgElement = document.createElement('img');
            imgElement.src = imgUrl;
            document.body.appendChild(imgElement);
        };
        if (file) {
            reader.readAsDataURL(file);
        }
    }
});

在这段代码中，我们首先获取用户选择的所有文件 files。然后通过 for 循环遍历这些文件。对于每个文件，创建一个 FileReader 对象。FileReader 用于读取文件内容，并将其转换为特定格式的数据。

reader.onloadend 事件在文件读取完成后触发。在这个事件处理函数中，通过 reader.result 获取图片的 DataURL 格式的地址。这个地址可以直接用于创建 img 元素，并展示在页面上。

另外，如果需要将所有图片地址存储起来，可以定义一个数组，在获取到 imgUrl 后将其添加到数组中。例如：

const imgUrls = [];
reader.onloadend = function() {
    const imgUrl = reader.result;
    imgUrls.push(imgUrl);
    console.log(imgUrls);
};

通过上述方法，我们可以轻松获取所有上传图片的地址，并根据需求分别展示或进行其他处理。无论是用于展示图片预览，还是将图片地址发送到后端进行存储，这种方法都非常实用。掌握这些技巧，能有效提升前端开发中图片上传功能的实现效率和用户体验。