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

Question

我正在尝试在我的 vue 组件中使用 map 函数。我有一个文件上传输入，可以接受多个文件。由于我正在使用电子，因此我无法将文件直接传递到应用程序的后端，因此我想使用 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 对象实际上不是一个数组，并且没有.map 方法。但是您可以像这样访问文件：

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

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