WebUploader 上传多张图片时怎样获取全部图片路径

在Web开发中，WebUploader是一款常用的文件上传组件，它提供了便捷的文件上传功能。当我们需要上传多张图片时，有时会面临获取全部图片路径的需求，下面将详细介绍具体的实现方法。

在引入WebUploader并进行初始化配置时，我们需要设置一些关键的参数。例如，指定上传的文件类型为图片格式，设置上传的并发数量、文件大小限制等。要为上传按钮和文件选择按钮绑定相应的事件，以便用户触发上传操作。

当用户选择多张图片后，WebUploader会触发相应的事件。我们可以在这些事件中获取到所选图片的相关信息。其中，获取图片路径的关键在于监听“filesQueued”事件。当文件被添加到上传队列时，这个事件会被触发。

在“filesQueued”事件的回调函数中，我们可以通过遍历上传队列中的文件对象来获取每张图片的路径。文件对象中包含了诸如文件名、文件大小、文件类型以及文件路径等信息。通过访问文件对象的“source”属性，我们就可以获取到图片的路径。

以下是一个简单的示例代码：

var uploader = WebUploader.create({
    // 相关配置参数
});

uploader.on('filesQueued', function (files) {
    var paths = [];
    for (var i = 0; i < files.length; i++) {
        paths.push(files[i].source);
    }
    console.log(paths);
});

在上述代码中，我们在“filesQueued”事件中遍历了上传队列中的文件对象，并将每张图片的路径存储到一个数组中，最后将这个数组打印到控制台。

需要注意的是，由于浏览器的安全限制，在某些情况下，我们可能无法直接获取到图片的真实路径。此时，可以考虑通过其他方式来获取图片的相关信息，例如通过FileReader对象读取图片内容。

通过监听WebUploader的“filesQueued”事件，并遍历上传队列中的文件对象，我们可以较为方便地获取到上传多张图片时的全部图片路径，从而满足实际开发中的需求。