QML FileDialog 可以用于 Select 从 Web 浏览器上传文件吗？

Question

我正在尝试在我的基于浏览器的 Qt/QML 应用程序中创建一个弹出对话框，以便 select 我的工作站上的一个文件 上传到单位运行网络服务器。我不确定通过在浏览器中单击按钮调用时 FileDialog 正在运行的“上下文”。它是运行服务器和托管页面的本地设备，还是运行浏览器工作站的本地设备？

我在 QML 中得到了以下代码，摘自 FileDialog 文档中的示例：

FileDialog {
    id: fileDialog
    title: "Please choose a file"

    folder: shortcuts.home
    onAccepted: {
        console.log("You chose: " + fileDialog.fileUrls)
        //Do the data_client stuff and get the file moving
        client.getUploadFile(fileUrls)
    }
    onRejected: {
        console.log("Canceled")
    }
}

此对话框显示以下内容：

Button {
    id: uploadButton
    x: 224
    y: 14
    text: qsTr("Upload")
    onClicked: {
        fileDialog.open()
    }
}

我目前看到的问题是，当打开时，对话框给了我一些我不知道的文件系统“space”。无论我是运行在 Windows 还是 Linux 机器上，我都会在“/home/web_user”目录中得到以下对话框：

在我的外行人看来，这似乎表明该对话是托管服务器的单元的本地对话（基于 linux，而我的工作站通常基于 Windows），但是我在那个单元的任何地方都找不到那个目录结构。它是否存在于 Web 服务器 (lighttpd) 中的某些特殊上下文？这是浏览器上下文中的某个用户 space 吗？我需要做些什么来将 FileDialog“指向”我要从中上传文件的工作站上的本地文件系统吗？

我不精通 Web 开发 lingo/tools，因此我尝试使用 Qt/WebAssembly 创建基于 Web 的 GUI，所以请原谅我使用的术语可能不是技术性的正确...

Answer 1

我对自己没有仔细阅读文档感到非常生气。

为了使用小部件，我不得不从 QGuiApplication 更改为 QApplication，将“小部件”添加到我的项目“QT +=”行，更改 QML 以调用后端而不是尝试直接在 QML 中调用 FileDialog，并调用适当的函数，如 QFileDialog 文档中指定...

QML 现在是：

Button {
    id: uploadButton
    x: 224
    y: 14
    text: qsTr("Upload")
    onClicked: {
        client.getUploadFile();
    }
}

在后端 C++ 中：

auto fileContentReady = [](const QString &fileName, const QByteArray &fileContent) {
    if (fileName.isEmpty()) {
        // No file was selected
    } else {
        qDebug() << "File name: " + fileName;
    }
};

void Data_Client::getUploadFile()
{
    QFileDialog::getOpenFileContent("Images (*.png *.xpm *.jpg)",  fileContentReady);
//...
}

在 getOpenFileContent() 的文档中定义得非常清楚，但我必须了解很多关于 emscripten、浏览器 sand-boxes 和 Web 的东西，才意识到我是什么没看到...希望这能帮助遇到类似问题的人...

QML FileDialog 可以用于 Select 从 Web 浏览器上传文件吗？

Can QML FileDialog Be Used to Select Upload File from Web Browser?

qt

qml

webassembly