混合应用选择文件夹功能解析

最新推荐文章于 2024-06-08 11:09:14 发布

洲上牧童

最新推荐文章于 2024-06-08 11:09:14 发布

阅读量429

点赞数

分类专栏：混合开发文章标签： electron vue 选择文件夹

本文链接：https://blog.csdn.net/kingbox000/article/details/119478529

版权

本文介绍了在开发过程中遇到的用户选择文件夹需求，探讨了前端使用Input选择文件夹的限制，以及如何在Electron环境中利用终端方案实现该功能。通过尝试不同方法，包括直接引用fs模块、通过Webpack externals引入、预加载脚本挂载ipcRenderer，最终解决contextIsolation导致的问题，成功实现文件夹选择功能。

摘要由CSDN通过智能技术生成

近期在开发过程中，遇到了一个陌生而又熟悉的需求：选择文件夹。看似简单，实则有坑，本文记录了我的采坑过程。

需求描述

用户选择一个文件夹（注意，不是文件，是文件夹），然后前端拿到文件夹本地全局路径，进行一系列的其他操作。

最先想到的方案

前端开发最先想到的就是用Input，然后Type=file，去获取文件路径，这样就可以拿到路径了，于是，我实现了一版本：

function () {
   
    let inputObj = document.createElement('input');
    inputObj.setAttribute('id', '_ef');
    inputObj.setAttribute('type', 'file');
    inputObj.setAttribute('style', 'visibility:hidden');
    inputObj.setAttribute('webkitdirectory', '');
    inputObj.setAttribute('directory', '');
    document.body.appendChild(inputObj);
    inputObj.addEventListener('change', function (a,b,c) {
   
        let obj = document.getElementById('_ef'