最近在做使用者头像上传功能时把 Rust/WASM 前端到 S3 后端的完整文件上传链路跑通了。整个过程不算顺滑——光 WASM 里读个文件就踩了一下午的坑。这篇文章把这个链路的每一环都拆开来讲，

提前声明这方面。这篇文章基于 Leptos SSR + WASM 方案，后端对接 S3 兼容存储，部分实现细节和框架绑定较强，仅供参考。

一、整体架构：四个环节，哪个掉了都传不上去

整个文件上传链路从使用者拖拽一个文件开始，到文件落盘在 S3 上。中间要经过四个关键环节：

浏览器 FileReader → JsFuture 异步读取 → Vec
↓Leptos Server Function → HTTP POST → 后端校验
↓FileCommandService → 领域校验 + 分类存储
↓RustFSGateway → S3 PutObject → 落盘

每一层都有校验，每一层都可能失败。下面按数据流的顺序逐个拆解。

二、浏览器端：FileReader + JsFuture，差点把我逼疯

为什么在 WASM 里读文件这么麻烦？

在 JS 里读取使用者选中的文件很简单，file.arrayBuffer 一行搞定。但在 Rust/WASM 里我们没有 JS 的 async/await 语法糖，必须用 web_sys::FileReader 手动绑定回调。接下来用 JsFuture 把回调式的 API 转成 Rust 的 Future。

听起来不复杂？其实，写起来是真要命，

至于举个例子，把 FileReader 的 onload 回调转成 Promise

主要思路是用 js_sys::Promise::new 手动创建一个 Promise。在 FileReader 的 onload 回调里 resolve，在 onerror 里 reject，接下来用 JsFuture::from 去 await。

但这里有个大坑：闭包的生命周期。

Promise::new 的回调是同步执行的。所以如果闭包在这个回调里创建、又在这个回调结束时被 drop，那文件还没读完，onload 闭包就已经被释放了——文件永远读不出来。老实说，

正确的做法是用 Rc> 把闭包所有权移到 executor 外面。这是整个 WASM 上传里最 tricky 的一段代码：

pub async fn read_file_as_bytes -> Result,String> {
let file_reader = FileReader::new.map_err?，老实说，// 关键：闭包持有者放在 executor 外面保证生命周期跨越 await
type ClosureHolder = Rc>;let onload_holder: ClosureHolder = Rc::new);let onerror_holder: ClosureHolder = Rc::new);let promise = js_sys::Promise::new(&mut |resolve,reject| {
let reader = file_reader.clone;let onload_holder_inner = onload_holder.clone;
let onerror_holder_inner = onerror_holder.clone;// onload 回调：读到数据后 resolve
let onload = Closure::wrap(Box::new(move |_: web_sys::Event| {
// 先释放 onerror，保证互斥：两个回调只有一个执行
onerror_holder_inner.borrow_mut.take;怎么说呢，if let Ok = reader.result {
resolve.call1.unwrap;}
}) as Box);// onerror 回调：读失败就 reject
let onerror = Closure::wrap(Box::new(move |_: web_sys::Event| {
onload_holder_inner.borrow_mut.take;reject.call1).unwrap;}) as Box);file_reader.set_onload.unchecked_ref));file_reader.set_onerror.unchecked_ref));// 把闭包所有权移到外面防止 Promise 构造函数返回后被 drop
*onload_holder.borrow_mut = Some;*onerror_holder.borrow_mut = Some;file_reader.read_as_array_buffer.unwrap;})，// await Promise，此时闭包还在外面活着
let result = JsFuture::from
.await
.map_err?，// holders 在这里离开作用域，闭包安全释放。零泄漏
// ArrayBuffer → Uint8Array → Vec
let array_buffer = js_sys::ArrayBuffer::from;let uint8_array = js_sys::Uint8Array::new(&<
     array_buffer);
    let mut bytes = vec!;
    uint8_array.copy_to(&amp;<
     &amp;;bytes);
    Ok
}

这段代码三个踩坑点

• . 闭包生命周期是主要难点。 
• . 两个闭包互相释放。不过， 
• . ArrayBuffer → Vec 必须经过 Uint8Array。不过， 

三、跨边界传输：Leptos Server Function 自动序列化

你写的是一行函数调用。框架做的是 HTTP POST + 序列化

拿到 \<\<\<\<\<\<\<\<\\\langle\langle\langle\langle\langle\langle\langle\langle\langle\u\rangle\u\rangle\u\rangle\u\rangle\u\rangle\u\rangle\u\rangle\u\rend;说起来，\" />\\rangle\" />\\rceil;" />\\rceil，" />\\rceil;" />\\rceil，" />\\rceil;" />\\rceil，" />",which is an empty string." />"。but that seems corrupted. Let's keep original simpler.