input上传文件伪路径问题

Question

为什么在老师这里上传文件之后，会存在一个路径path呢，正常好像是获取不到的，怎么才能获取到path呢

Answer 1

tyler4400 2025-06-16 17:58:42

除了在页面用input框选择文件之外， 还可以直接让主线程调用electron提供的showDialog方法， 获取文件。然后返回path给前端就ok了

文档： https://www.electronjs.org/zh/docs/latest/api/dialog#dialogshowopendialogwindow-options

Answer 2

张轩 2025-03-20 09:49:21

两位同学

找到原因了，最新版的 File 对象移除了 path这个属性：https://www.electronjs.org/docs/latest/api/file-object

推荐使用 webUtils.getPathForFile 获取对应的路径，替换为这个方法就可以了。

所以这里要简单修改一下：

// preload.ts 多加一个方法
getFilePath: (file: File) => webUtils.getPathForFile(file),
// 注意定义文件也改一下
getFilePath: (file: File) => string;

// 然后在MessageInput 中调用这个就可以
const onCreate = () => {
    if(model.value && model.value.trim() !== '') {
        if (selectedImage) {
            const filePath = window.electronAPI.getFilePath(selectedImage)
            emit('create', model.value, filePath)
        } else {
            emit('create', model.value)
        }
    selectedImage = null
    imagePreview.value = ''
}
}

• 提问者 是奶茶呀 #1

  收到，谢谢老师

Answer 3

张轩 2025-03-14 15:46:49

同学你好

请问你使用的是什么系统？windows 还是 mac？有可能 windows 和 mac 在这里File 对象的属性不同，能否提供一下你的源代码（git），我先看下，然后看看 windows 要怎样处理下

• 提问者 是奶茶呀 #1

  是windows，仓库地址https://git.imooc.com/anzaigo/v-chat.git

• 慕神1452826 #2

  老师,我mac系统也是这样的 files里没有path属性,请问一下这个怎么解决?