file - this.$refs.selectedImages.files.map 不是函数 - vue electron

Question

我正在尝试使用 map在我的 vue 组件中运行。我有一个文件上传输入，可以接受多个文件。由于我正在使用 Electron ，因此无法将文件直接传递到应用程序的后端，因此我想使用 Array.prototype.map()函数获取文件路径并在使用 ipcRenderer.send() 传递数组后处理它们功能。无论如何，我总是收到此错误 this.$refs.selectedImages.files.map is not a function我该如何解决？
这是我正在尝试的实际代码

    handleFiles() {
      this.files = this.$refs.selectedImages.files.map( (file) => file.path ); //this will cause the error
    }, //
    processFiles() {
      this.isLoading = true;
    
      window.ipcRenderer.send('processFiles', this.files);
      
      window.ipcRenderer.on('', (event, data) => {
        console.log(ecent, data);
        saveAs(data, 'processed.mfs')
      });
    } 

更新
为了尝试解决这个问题，我循环 FilesList 来提取每个文件的路径，然后使用 ipcRenderer 传递它.问题是我无法在 background.js 上收到消息我不知道为什么。

this.$refs.selectedImages.files.forEach( (file) => {
 this.files.push(file.path) // this will push into the array the path of each file
})

window.ipcRenderer.send('processFiles', this.files);

//background.js

import { ipcMain } from 'electron'

ipcMain.on('processFiles', (event, data) => {
 console.log(event, data) // the message will not arrive
})

Answer 1

FileList object 实际上不是数组，并且没有 .map方法。但是您可以像这样访问文件:

const files = this.$refs.selectedImages.files;

for (var i = 0; i < files.length; i++) {
   console.log(files[i]);
}