uni-app中图片转base64需先用uni.getImageInfo标准化路径再调用image-tools的pathToBase64,因各端tempFilePaths类型不一(H5为blob:、App为file://等),FileReader不接受字符串路径;pathToBase64返回纯base64字符串,需手动拼接data:image/xxx;base64,前缀并匹配正确MIME类型。

uni-app 里把图片转成 base64 不是调个函数就能完事的事——不同平台返回的路径类型不一致,直接用 FileReader 会报 Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob',这是最常卡住人的地方。
为什么不能直接用 FileReader 处理 tempFilePaths?
因为 uni.chooseImage 返回的 tempFilePaths[0] 在 H5 端可能是 blob:http:// 开头的 URL,在 App 端是 file:// 或 _doc/ 开头的本地路径,它们都不是真正的 Blob 对象,FileReader.readAsDataURL() 拒绝接收字符串路径。
推荐方案:用 image-tools + getImageInfo 组合兜底
社区插件 image-tools 的 pathToBase64 内部已适配多端读取逻辑,但必须配合 uni.getImageInfo 先“标准化”路径——尤其对 H5 端的 blob: 路径,getImageInfo 会把它转成可读的临时文件路径。
- 先安装:
npm i image-tools --save - 页面中引入:
import { pathToBase64 } from 'image-tools' - 调用顺序不能错:
uni.chooseImage→uni.getImageInfo(传入tempFilePaths[0])→ 用getImageInfo.success.path调pathToBase64 - 示例片段:
uni.chooseImage({
count: 1,
success: (res) => {
uni.getImageInfo({
src: res.tempFilePaths[0],
success: (imgInfo) => {
pathToBase64(imgInfo.path)
.then(base64 => {
console.log('data:image/png;base64,' + base64);
})
.catch(err => console.error(err));
}
});
}
});
小程序端可以绕过 getImageInfo 吗?
可以,但不建议。微信小程序支持直接用 uni.getFileSystemManager().readFile 读取 tempFilePaths 并设 encoding: 'base64',但该方式在 App 和 H5 端完全失效。硬写平台判断容易漏 case,比如 H5 下 getFileSystemManager 不存在,App 下 readFile 对 file:// 路径权限受限。统一走 getImageInfo + pathToBase64 更稳。
注意 pathToBase64 返回的是纯 base64 字符串,不是 data URL
pathToBase64 返回的是类似 /9j/4AAQSkZJRgABAQAAA... 这样的纯 Base64 字符串,不含 data:image/png;base64, 前缀。你要显示或上传,得手动拼接:
- 显示用:
this.imgSrc = 'data:image/jpeg;base64,' + base64 - 上传用:
{ image: 'data:image/jpeg;base64,' + base64 } - 别漏了 MIME 类型——根据原始图片后缀判断,
.png用image/png,.jpg/.jpeg用image/jpeg,否则后端可能解析失败
tempFilePaths[0] 在不同平台根本不是同一种东西。绕开 getImageInfo 直接喂给 pathToBase64,H5 端大概率静默失败;忽略 MIME 类型拼接,后端解码会丢图。这些点不踩一遍,很难信。


















