Skip to content

readWriteFileInH5

H5 端文件读写适配器,showFile 内部调用

H5 文件能力有限:读仅支持 HTTP(S) URL;写通过触发浏览器下载实现。

前置依赖

typescript
interface FileInH5Deps {
  fetch: Window['fetch']
  Blob: Window['Blob']
  createObjectURL: Window['URL']['createObjectURL']
  revokeObjectURL: Window['URL']['revokeObjectURL']
  createElement: Document['createElement']
  body: Document['body']
  FileReader: new () => FileReader
  error: Console['error']
}
依赖说明
fetch读取远程文件
Blob / createObjectURL / revokeObjectURL构造下载链接
createElement / body创建并触发 <a download>
FileReaderencoding: 'base64' 时转换 blob
error错误日志

readFileInH5

函数签名

typescript
function readFileInH5(options: FileOptions, deps: FileInH5Deps): Promise<FileResult>

参数

参数名类型必填说明
options.filePathstring必须以 http://https:// 开头
options.encodingstring'base64' 时返回 base64 字符串,否则返回文本
depsFileInH5Deps环境依赖

返回值

类型说明
Promise<FileResult>成功含 data;本地路径或非 URL reject

writeFileInH5

函数签名

typescript
function writeFileInH5(options: FileOptions, deps: FileInH5Deps): Promise<FileResult>

参数

参数名类型必填说明
options.filePathstring用于推导下载文件名(取最后一段路径)
options.datastring | ArrayBuffer文件内容
depsFileInH5Deps环境依赖

返回值

类型说明
Promise<FileResult>成功含 savedFilePath(实际为下载文件名);缺参数 reject

工作原理

  1. fetch 拉取远程资源;base64 编码时用 FileReader.readAsDataURL 并截取逗号后 payload。
  2. 读失败场景:非 HTTP(S) 路径直接 reject,提示 H5 不支持本地路径。
  3. :将 data 包装为 Blob,创建临时 object URL,插入隐藏 <a> 触发 click() 下载,随后移除节点并 revokeObjectURL
  4. H5 无法写入任意本地路径,「保存路径」仅为下载时的文件名。