Python3 / JS - 如何使用 eel 处理本地文件上传？

Question

我目前正在使用Eel开发本地类似 Electron 的软件。

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

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

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

以下问题可以帮助另一个使用 Electron 的用户，但我正在寻找 vanilla 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 显示信息。
很简约。