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

Question

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

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

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

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

following question用 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 显示信息。
非常整洁。