如何在WebAssembly内存上下文中传递File
?
使用JavaScript在浏览器中读取文件很简单:
<input class="file-selector" type="file" id="files" name="files[]" />
我能够使用crate stdweb来引导用Rust编写的WebAssembly代码,向DOM元素添加一个事件监听器并启动一个FileReader
:
let reader = FileReader::new();
let file_input_element: InputElement = document().query_selector(".file-selector").unwrap().unwrap().try_into().unwrap();
file_input_element.add_event_listener(enclose!( (reader, file_input_element) move |event: InputEvent| {
// mystery part
}));
在JavaScript中,我会从元素中获取文件并将其传递给阅读器,但是,stdweb的API需要以下签名:
pub fn read_as_array_buffer<T: IBlob>(&self, blob: &T) -> Result<(), TODO>
我不知道如何实现IBlob
,我确信我遗漏了一些明显的东西,无论是使用stdweb API还是我对WebAssembly / Rust的理解。我希望有一些比converting stuff to UTF-8更冗长的东西。
当FileReader
本身从JavaScript传递给WebAssembly时,它可以工作。这似乎也是一种干净的方法,因为无论如何都必须通过JavaScript API读取数据 - 无需从WASM调用JS。
的index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Read to wasm</title>
</head>
<body>
<input type="file" id="file-input"/>
<script src="reader.js"></script>
<script>
var fileReader = new FileReader();
fileReader.onloadend = e => Rust.reader
.then(reader=> {
window.alert(reader.print_result(fileReader));
});
var fileInputElement = document.getElementById("file-input");
fileInputElement.addEventListener("change", e => fileReader.readAsText(fileInputElement.files[0]));
</script>
</body>
</html>
卖弄.人生
#![feature(proc_macro)]
#[macro_use]
extern crate stdweb;
use stdweb::js_export;
use stdweb::web::FileReader;
use stdweb::web::FileReaderResult;
#[js_export]
fn print_result(file_reader: FileReader) -> String {
match file_reader.result() {
Some(value) => match value {
FileReaderResult::String(value) => value,
_ => String::from("not a text"),
}
None => String::from("empty")
}
}
fn main() {
stdweb::initialize();
stdweb::event_loop();
}
我设法访问文件对象并通过以下方式将其传递给FileReader
in:
let reader = FileReader::new();
let file_input_element: InputElement = document()
.query_selector(".file-selector")
.unwrap()
.unwrap()
.try_into()
.unwrap();
file_input_element.add_event_listener(
enclose!( (reader, file_input_element) move |event: InputEvent| {
let file = js!{return @{&file_input_element}.files[0]};
let real_file: stdweb::web::Blob = file.try_into().unwrap();
reader.read_as_text(&real_file);
}
这段代码编译。但是,数据永远不会通过reader.result()
获得。