Python3 / JS - 如何使用鳗鱼处理本地文件上传?

Question

我目前正在与Eel一起开发一个本地的类似Electron的软件。

该软件旨在捆绑为需要在用户本地计算机上运行的独立 Windows 应用程序。

在这个软件中，我希望能够在 Python 后端选择和处理本地文件。要访问该文件，我使用带有<input type='file' />的 HTML<form>。

我想知道如何在这个框架内处理本地文件的上传，因为与电子不同，vanilla JavaScript 中没有可用的dialog.showOpenDialog()函数。

以下问题帮助了另一个使用 Electron 的用户，但我正在寻找原版 ES6 中的解决方法。

提前致谢

Answer 1

在摆弄JS和HTML5 File API之后(并且很难获得预期的结果(，我记得我是一个Python人。

我想到的这个问题的最简单解决方案是让Python处理文件管理。因此，我不是使用 HTML<input type='file'>，而是创建一个带有 onclick JS 函数的按钮：

<button type="button" onclick="getPathToFile()">Select File</button>

<script type="text/javascript">
function getPathToFile() {
eel.pythonFunction()(r => console.log(r));
};
</script>

同时，我让Python处理后端的文件对话框：

import wx
import eel
@eel.expose
def pythonFunction(wildcard="*"):
app = wx.App(None)
style = wx.FD_OPEN | wx.FD_FILE_MUST_EXIST
dialog = wx.FileDialog(None, 'Open', wildcard=wildcard, style=style)
if dialog.ShowModal() == wx.ID_OK:
path = dialog.GetPath()
else:
path = None
dialog.Destroy()
return path

在JavaScript的控制台中，您可以获得[1] path/to/selected/file。

此方法还允许您像在Python中一样对文件执行操作(解析，保存，修改等(，并使用HTML/CSS/JavaScript GUI显示信息。
相当整洁。