uni-app如何获取图片临时路径并显示-uni-app-PHP中文网

不能直接使用，需按平台兼容处理：h5须转blob url，app/小程序可直用但ios可能需转本地路径，canvas绘图需下载为新临时文件，临时路径仅短期有效。

uni-app如何获取图片临时路径并显示

直接调用 uni.chooseImage 就能拿到临时路径，但不是所有平台返回的路径都能直接给 <image></image> 用 —— 尤其是 iOS 和部分 Android WebView 环境下，tempFilePaths 返回的路径可能带 file:// 前缀或平台私有协议，直接赋值给 src 会白屏或报错。

uni.chooseImage 返回的 tempFilePaths 能不能直接显示？

大多数情况下可以，但有例外：

iOS 微信小程序：返回路径形如 wxfile://xxx，<image></image> 支持，无需转换
App（iOS/Android）：返回 file:// 或 http:// 开头路径，Android 通常可直用，iOS 部分版本需转成本地文件路径
H5：tempFilePaths 实际是 blob: URL，必须用 URL.createObjectURL() 转换后才能显示

所以别无脑赋值，先判断平台再决定是否处理。

如何安全地把临时路径塞进标签？

核心是做一层兼容封装，避免白屏：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

用 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></image> 能显示，uni.getImageInfo({ src: path }) 也可能失败 —— 特别是 H5 下传了 blob: URL
解决办法：对非小程序平台，先用 uni.downloadFile 把临时路径“下载”成新临时文件，再传给 drawImage
Android 上某些厂商 WebView 会拦截 file:// 访问，需调用 uni.getFileSystemManager().readdir 确认路径存在后再绘图