javascript - 从前端将客户端文件传递给 webassembly

Question

我希望将用户提交的数据传递给我已编译为 wasm 的 C++ 函数。数据是用户通过输入标签在前端提交的文件，如下所示:

<input type="file" onChange={this.handleFile.bind(this)} />

onChange 回调目前看起来像这样:

handleFile(e){
    const file = e.currentTarget.files[0];
    const reader = new FileReader();
    reader.onloadend = evt => {
        window.Module.readFile(evt.target.result);
    }
    reader.readAsArrayBuffer(file);
}

最后，包含 readFile 函数的 .cpp 文件如下所示:

void readFile(const std::string & rawString){
  std::vector<uint8_t> data(rawString.begin(), rawString.end());
  //...
}

EMSCRIPTEN_BINDINGS(my_module) {
  emscripten::function("readFile", &readFile);
}

我整个下午都在阅读各种文档，所以我知道我应该在堆上为这些文件分配内存，然后将 ptr 从 js 传递到 readFile，而不是传递所有数据。我的问题是我真的不明白所有这些应该如何运作。有人可以解释一下吗？

Answer 1

借助 Emscripten，您可以为 WASM 使用虚拟文件系统。首先，使用 -s FORCE_FILESYSTEM=1 选项编译 C/C++ 代码。在 C/C++ 中，您只需像往常一样使用标准库函数处理文件。在 HTML 页面上，您有一个 input type=file 元素。

从输入元素获取文件并将其传递到 WASM 的示例 JS 代码:

function useFileInput(fileInput) {
    if (fileInput.files.length == 0)
        return;
    var file = fileInput.files[0];

    var fr = new FileReader();
    fr.onload = function () {
        var data = new Uint8Array(fr.result);

        Module['FS_createDataFile']('/', 'filename', data, true, true, true);
        Module.ccall('YourCppFunctionToUtilizeTheFile', null, [], null);

        fileInput.value = '';
    };
    fr.readAsArrayBuffer(file);
}

链接:

1. Emscripten - File System Overview
2. Here I use the approach, see emulatorAttachFileInput() function