不能直接使用，需按平台兼容处理：H5须转blob URL，App/小程序可直用但iOS可能需转本地路径，canvas绘图需下载为新临时文件，临时路径仅短期有效。
直接调用 uni.chooseImage 就能拿到临时路径，但不是所有平台返回的路径都能直接给 <image> 用 —— 尤其是 iOS 和部分 Android WebView 环境下，tempFilePaths 返回的路径可能带 file:// 前缀或平台私有协议，直接赋值给 src 会白屏或报错。
uni.chooseImage 返回的 tempFilePaths 能不能直接显示？
大多数情况下可以，但有例外：
- iOS 微信小程序：返回路径形如
wxfile://xxx，<image>支持，无需转换 - App（iOS/Android）：返回
file://或http://开头路径，Android 通常可直用，iOS 部分版本需转成本地文件路径 - H5：
tempFilePaths实际是blob:URL，必须用URL.createObjectURL()转换后才能显示
所以别无脑赋值，先判断平台再决定是否处理。
如何安全地把临时路径塞进 <image> 标签？
核心是做一层兼容封装，避免白屏：
- 用
uni.getSystemInfoSync().platform判断当前平台 - H5 下必须用
URL.createObjectURL(new Blob([res.tempFiles[0].path]))（注意：H5 的tempFiles才带真实二进制对象，tempFilePaths是空字符串） - App 和小程序环境，优先用
tempFilePaths[0]；若渲染失败，再 fallback 到uni.getFileSystemManager().readFile+data:image/png;base64,...方案 - 不要在
success回调里立刻更新src，加个nextTick或setTimeout(() => {}, 0)避免 Vue 响应式未同步
示例片段：
chooseImage() {
uni.chooseImage({
success: (res) => {
const path = res.tempFilePaths[0];
if (uni.getSystemInfoSync().platform === 'h5') {
// H5 必须走 Blob
const blob = new Blob([res.tempFiles[0].path], { type: 'image/jpeg' });
this.imgSrc = URL.createObjectURL(blob);
} else {
// 小程序 / App 直接用
this.imgSrc = path;
}
}
});
}
为什么有时图片显示了但 canvas.draw 失败？
因为 canvas.drawImage 对路径更敏感：
- 它不接受
blob:、data:协议，只认本地文件路径（file://或平台临时路径） - 即使
<image>能显示，uni.getImageInfo({ src: path })也可能失败 —— 特别是 H5 下传了blob:URL - 解决办法：对非小程序平台，先用
uni.downloadFile把临时路径“下载”成新临时文件，再传给drawImage - Android 上某些厂商 WebView 会拦截
file://访问，需调用uni.getFileSystemManager().readdir确认路径存在后再绘图
临时路径有效期和清理风险
临时路径不是永久的：
- 微信小程序：24 小时内有效，退出小程序后可能失效
- App：iOS 临时目录可能被系统清理，Android 一般保留到应用重启
- 如果要长期显示或反复使用，必须用
uni.saveFile拷贝到持久化路径，并存uni.setStorageSync - 别依赖多次调用
uni.canvasToTempFilePath返回的路径相同 —— 每次都是新路径，旧路径立即失效
真正容易被忽略的是：很多开发者以为 tempFilePaths 是“稳定地址”，其实它只是“此刻可用的一次性句柄”，跨生命周期就断。”
