如何将FileReader.readAsArrayBuffer直接写入WebAssembly线性内存？

我正在使用WebAssembly，希望将用户提交文件的字节直接从JavaScript传递到Rust代码中。我已向JavaScript暴露了Rust结构体WasmMemBuffer，它指向WebAssembly内存区域，可从JavaScript无拷贝写入。当前实现运行正常，但我希望跳过创建ArrayBuffer、转换为Uint8Array再拷贝到WasmMemBuffer的步骤，直接将用户文件内容写入WebAssembly线性内存。已知FileReader调用readAsArrayBuffer时会分配新的ArrayBuffer，请问能否让它直接指向WasmMemBuffer？

当前Rust实现代码 #

use js_sys::{Function, Uint8Array};
use wasm_bindgen::prelude::{wasm_bindgen, JsValue};

#[wasm_bindgen]
pub struct WasmMemBuffer {
    buffer: Vec<u8>,
}

#[wasm_bindgen]
impl WasmMemBuffer {
    #[wasm_bindgen(constructor)]
    pub fn new(byte_length: u32, f: &Function) -> Self {
        let mut buffer = vec![0; byte_length as usize];
        unsafe {
            let array = Uint8Array::view(&mut buffer);
            f.call1(&JsValue::NULL, &JsValue::from(array))
                .expect("The callback function should not throw");
        }

        Self { buffer }
    }
}

当前JavaScript调用代码 #

import { WasmMemBuffer } from 'rust-crate';

const buf = new WasmMemBuffer(1000, (arr: Uint8Array) => {
  for (let i = 0; i < arr.length; i++) {
    arr[i] = 1.0; // Initialize the buffer with ones
  }
});

当前文件读取JavaScript代码 #

// e is the onchange event from a <input type="file"> element
function readFile(e: Event) {
  const target = e?.target as HTMLInputElement;
  const file = target?.files?.[0];

  if (!target || !file) {
    return;
  }

  const reader = new FileReader();

  reader.onload = (e) => {
    const res = e.target?.result as ArrayBuffer;
    
    if (res) {
      // Do something with res
    }  
  };

  reader.readAsArrayBuffer(file);
}

首先明确：FileReader.readAsArrayBuffer无法直接写入WebAssembly线性内存，因为它的设计逻辑就是生成一个新的ArrayBuffer存储文件内容。但我们可以优化读取流程，将文件内容直接复制到Wasm内存区域，避免多余的中间拷贝操作，具体实现如下：

步骤1：修改Rust结构体，暴露内存视图获取方法 #

给WasmMemBuffer添加方法，让JavaScript能直接访问Wasm内存的Uint8Array视图：

#[wasm_bindgen]
impl WasmMemBuffer {
    // 原构造函数保持不变
    #[wasm_bindgen(constructor)]
    pub fn new(byte_length: u32, f: &Function) -> Self {
        let mut buffer = vec![0; byte_length as usize];
        unsafe {
            let array = Uint8Array::view(&mut buffer);
            f.call1(&JsValue::NULL, &JsValue::from(array))
                .expect("The callback function should not throw");
        }

        Self { buffer }
    }

    // 添加方法：获取Wasm内存的Uint8Array视图
    #[wasm_bindgen]
    pub fn get_view(&mut self) -> Uint8Array {
        unsafe { Uint8Array::view(&mut self.buffer) }
    }

    // 可选：获取缓冲区字节数据（供Rust内部处理）
    #[wasm_bindgen(getter)]
    pub fn bytes(&self) -> Vec<u8> {
        self.buffer.clone()
    }
}

步骤2：优化JavaScript文件读取逻辑 #

利用现代浏览器支持的Blob.arrayBuffer()方法替代FileReader，直接获取文件的ArrayBuffer后，将内容复制到Wasm内存的Uint8Array视图中，这是内存到内存的直接拷贝，效率极高：

async function readFile(e: Event) {
  const target = e?.target as HTMLInputElement;
  const file = target?.files?.[0];

  if (!target || !file) {
    return;
  }

  // 1. 根据文件大小创建对应尺寸的WasmMemBuffer
  const fileSize = file.size;
  const wasmBuffer = new WasmMemBuffer(fileSize as u32, () => {});
  const wasmUint8 = wasmBuffer.get_view();

  try {
    // 2. 直接读取文件为ArrayBuffer
    const fileBuffer = await file.arrayBuffer();
    // 3. 将文件内容复制到Wasm内存视图
    wasmUint8.set(new Uint8Array(fileBuffer));
    
    // 此时WasmMemBuffer已存储文件全部字节，可传递给Rust处理
    console.log("文件已写入Wasm内存");
  } catch (err) {
    console.error("读取文件失败:", err);
  }
}

关键说明 #

• file.arrayBuffer()是现代浏览器原生异步方法，比FileReader更简洁高效，返回的ArrayBuffer是文件内容的直接映射。
• Uint8Array.set()方法直接将源数组内容复制到目标数组（Wasm内存视图），无额外对象分配，属于最低开销的内存拷贝。
• 若需兼容旧版浏览器，可替换为FileReader.readAsArrayBuffer，核心逻辑保持一致：读取到ArrayBuffer后用set()写入Wasm内存。

内容的提问来源于stack exchange，提问作者acd