SDKsWASM

上传文件

使用 WASM SDK 独立上传文件并取得资源 URL。

uploadFile() 是独立上传能力，可用于头像、群头像、资料附件或其他业务文件，不从属于消息，也不会自动创建消息。

参数说明

参数	类型	是否必填	说明
`name`	`string`	是	文件名。
`contentType`	`string`	是	MIME 类型。
`uuid`	`string`	是	业务为本次上传生成的稳定任务 ID。
`file`	`File`	是	浏览器文件对象。WASM 包装层使用该对象完成上传。

下面先展示上传调用；如果界面需要显示进度，应在调用 uploadFile() 前按后文注册进度与完成事件，避免较小文件在监听建立前完成上传。

const uploadTaskID = crypto.randomUUID();
const uploadEventID = `${uploadTaskID}/${file.name}`;

const { data } = await openimsdk.uploadFile({
  name: file.name,
  contentType: file.type || 'application/octet-stream',
  uuid: uploadTaskID,
  file,
});

await saveAvatarURL(data.url);

Promise 成功后使用 data.url 作为远端资源地址。它只表示上传请求成功，不表示头像资料已经更新，也不表示聊天消息已经创建或发送；后续业务写入必须单独完成。若资源随后用于聊天，应使用返回的 URL 创建对应消息对象，再显式发送。

监听上传进度

SdkEvent.OnProgress 提供上传进度，SdkEvent.UploadComplete 提供完成信息。处理函数必须保持稳定引用，并在账号或状态层销毁时用同一引用调用 off()：

import { SdkEvent } from '@openim/wasm-client-sdk';

function handleUploadProgress({ data }) {
  if (data.clientMsgID !== uploadEventID) return;
  updateUploadProgress(data.clientMsgID, data.progress);
}

function handleUploadComplete({ data }) {
  if (data.uuid !== uploadEventID) return;
  completeUpload(
    data.uuid,
    data.fileSize,
    data.streamSize,
    data.storageSize,
  );
}

openimsdk.on(SdkEvent.OnProgress, handleUploadProgress);
openimsdk.on(SdkEvent.UploadComplete, handleUploadComplete);

function removeUploadListeners() {
  openimsdk.off(SdkEvent.OnProgress, handleUploadProgress);
  openimsdk.off(SdkEvent.UploadComplete, handleUploadComplete);
}

UploadComplete 的 data 是 FileUploadProgress。WASM 包装层会把完成事件中的 uuid 组合为 ${上传参数中的 uuid}/${file.name}，因此示例使用 uploadEventID 匹配事件；fileSize 是原文件大小，streamSize 是已经处理的流大小，storageSize 是远端存储对象的大小。大小字段的单位均为字节。

独立上传任务应保留业务生成的 uploadTaskID，并使用组合后的 uploadEventID 关联 SDK 事件。不要只用文件名或数组位置匹配并行上传。

这个页面有帮助吗？