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 类型拼接，后端解码会丢图。这些点不踩一遍，很难信。
