場景

用HTML和CSS和JS構建跨平臺桌面應用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調試和使用瀏覽器和VSCode進行調試：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調試后，需要實現將文件拖拽進div后獲取文件的路徑和內容。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程序猿
獲取編程相關電子書、教程推送與免費下載。

實現

首先打開index.html，添加一個div

<div class="for_file_drag" id="drag_test"><h2>File對象</h2><span>往這里拖文件</span> </div>

并給這個div添加一個id和樣式，新建css文件夾 并在文件夾下新建style.css

.for_file_drag {width: 100%;height: 400px;background: pink; }

給div添加一個寬度高度和背景色

然后在index.html中引用的js中

// File對象 實例 const fs = require('fs'); //獲取div對象 const dragWrapper = document.getElementById("drag_test"); //添加拖拽事件監聽器 dragWrapper.addEventListener("drop", (e) => {//阻止默認行為e.preventDefault();//獲取文件列表const files = e.dataTransfer.files;if(files && files.length > 0) {//獲取文件路徑const path = files[0].path;console.log('path:', path);//讀取文件內容const content = fs.readFileSync(path);console.log(content.toString());} })//阻止拖拽結束事件默認行為 dragWrapper.addEventListener("dragover", (e) => {e.preventDefault(); })

然后調試運行項目，然后往div中拖拽一個文件，然后打開控制臺

?

總結

以上是生活随笔為你收集整理的Electron中实现拖拽文件进div中通过File对象获取文件的路径和内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。