this.$refs.selectedImages.files.forEach 不是函数

Question

我正在开发一个 vue-electron 应用程序。我的windows构建有一些问题。似乎当用户选择一些文件并且我尝试使用$refs 获取它们时，这将不起作用。我有一个像这样的简单文件输入

<input type="file" class="custom-file-input" ref="selectedImages" @change="handleFiles()">

在我的 vue 组件代码中，我添加了一个名为 handleFiles() 的方法，它只会获取文件对象中每个文件的文件路径和类型

this.$refs.selectedImages.files.forEach( (file) => {
 const fileDetails = {path: file.path, type: file.type}
 this.files.push(fileDetails);
});

代码在 macOS 上运行良好，没有发生错误，文件被选中并从循环中正确迭代。该问题只会发生在 Windows 构建中，其中似乎未使用 $refs 选择文件输入。有什么办法可以解决这个问题吗？我正在考虑用for 循环替换$refs，但不确定。

编辑

我已从 forEach() 循环切换到 for()。现在错误似乎已解决，但我注意到将文件路径传递给主进程时存在问题。在我的virtualbox win10测试机中，我在控制台中发现文件路径错误

如果文件路径是C:\Users\debug\Desktop\filename.jpg，它将使用额外的斜杠字符C:\\Users\\debug\\Desktop\\filename.jpg 传递。可以修复吗？

Answer 1

FileList 不是数组。尝试将其转换为数组：

Array.from(this.$refs.selectedImages.files).forEach( (file) => {
 const fileDetails = {path: file.path, type: file.type}
 this.files.push(fileDetails);
});