file - this.$refs.selectedImages.files.map 不是一个函数 - vue electro

Question

我正在尝试在我的 vue 组件中使用 map 函数。我有一个可以接受多个文件的文件上传输入。由于我正在使用 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]);
}