uni-app中base64转Blob需先截去data前缀、atob解码为二进制、转Uint8Array再构造Blob;H5端需fetch blob URL获取真实Blob;App/小程序端无需转换,直接传filePath更稳妥。

uni-app 里 base64 怎么转 Blob 对象
直接用 Blob 构造函数就能转,但必须先解码 base64 字符串为二进制数据,否则生成的 Blob 内容是乱码或空的。
常见错误现象:Blob 对象大小为 0、上传后后端解析失败、图片打不开。
- base64 字符串开头通常带
data:image/png;base64,这段必须截掉,只留纯 base64 数据 - 用
atob()解码时,输入必须是合法 base64 字符串(长度为 4 的倍数,不含换行/空格) - 解码后需转成
Uint8Array或ArrayBuffer,再传给Blob构造函数 - 建议指定
type参数,比如"image/jpeg",否则默认是"",部分后端或 SDK(如ali-oss)会校验失败
示例代码:
base64ToBlob(base64Str) {
const arr = base64Str.split(',');
const mime = arr[0].match(/:(.*?);/)[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
H5 端 uni.chooseImage 后怎么拿到 Blob
在 H5 端,uni.chooseImage 返回的是临时文件路径(如 blob:http://xxx/xxx),这个路径本身不能直接用于 uni.uploadFile({ filePath }) —— 它会报错或上传为空。
正确做法是:用 fetch 或 XMLHttpRequest 请求该 blob URL,拿到 Response.blob()。
- 不能直接 new
Blob([url])—— 那只是把字符串当二进制塞进去,不是真实内容 - H5 没有
uni.getFileSystemManager().readFile,别套小程序写法 - 注意跨域:blob URL 是同源的,
fetch可以直接读,无需额外配置 - 如果后续要传给
ali-oss,它要求File或Blob,这里返回的Blob可直接用
简写示例:
async chooseAndToBlob() {
const res = await uni.chooseImage({ count: 1 });
const blobUrl = res.tempFilePaths[0];
const response = await fetch(blobUrl);
return await response.blob();
}
App 和小程序端要不要转 Blob
不需要主动转 —— uni.uploadFile 在 App 和小程序端原生支持 filePath(本地临时路径),直接传就行;强行转 Blob 反而多此一举,还可能因平台限制失败(比如 App 端无法通过 JS 访问本地文件系统读取 blob URL)。
但如果你用的是第三方 SDK(如 ali-oss),它明确要求 File 或 Blob 类型,那就要分平台处理:
- 小程序端:用
uni.getFileSystemManager().readFile读取tempFilePaths[0],得到arrayBuffer,再构造Blob - App 端:目前官方不提供 JS 层读取本地文件为
Blob的能力,推荐改用uni.uploadFile直传,或借助renderjs在 native 层转换 - H5 端:如上所述,
fetch(blobUrl).then(r => r.blob())最可靠
uni.uploadFile 传 Blob 还是 File 更稳妥
在 H5 端,uni.uploadFile 的 file 参数接受 File 或 Blob,但推荐优先用 File 对象 —— 因为它自带 name 和 type,后端更容易识别文件类型和扩展名。
Blob 没有 name 属性,上传时若不手动设置 fileName(uni.uploadFile 的 name 是字段名,不是文件名),后端可能收到无扩展名的文件。
- 从 base64 转
File:先转Blob,再用new File([blob], "xxx.jpg", { type: "image/jpeg" }) - 从 blob URL 转
File:同理,fetch 得到 blob 后包装成 File,记得补上合理文件名和 type - 避免用随机名如
timestamp + ".jpg",应尽量从原始路径或 base64 mime 推断真实类型
容易被忽略的一点:H5 端上传失败常不是因为格式不对,而是后端没收到 Content-Disposition 中的 filename —— 这依赖于你传的是 File 而非裸 Blob。


















