uni.chooseImage返回的tempFilePaths需立即处理:H5用URL.createObjectURL转blob,小程序/App可直用;预览必须校验路径有效性并优先使用上传后的服务端URL,避免iOS临时路径失效导致白屏。
uni.chooseimage 返回的是临时路径,不是 base64,不能直接当 的 src;uni.uploadfile 是单文件接口,多图必须多次调用;uni.previewimage 的 urls 必须是数组,current 推荐传索引而非 url —— 这三点不厘清,多图功能在真机上基本必崩。
uni.chooseImage 返回的 tempFilePaths 怎么安全用于预览
真机(尤其 iOS)返回的 tempFilePaths 是本地沙盒路径,生命周期极短,且 H5 / 小程序 / App 三端渲染能力不同:
- H5 下多数是
blob:开头的 URL,可直接赋给 - 微信小程序和 App 端支持直接用临时路径渲染,但必须确保路径合法(不能含非法字符、不能是空字符串)
- iOS 设备上若延迟几秒再用该路径,可能已失效,导致白屏或
404 - 不要把
tempFilePaths原样塞进uni.previewImage({ urls: tempFilePaths })—— 某些安卓机型会因路径未校验而卡死
建议做法:选择后立刻构造带状态的对象数组,例如:
uni.getImageInfo
- 典型错误写法:
filePath: tempFilePaths[0]却把整个数组传进去,或误写成filePath: JSON.stringify(tempFilePaths) - 后端接收字段名(
name)必须匹配:如果后端要images[],你就得写name: 'images',而不是固定写name: 'file' - 并发太多会触发平台限制:微信小程序最多 10 个并发,App 端建议控制在 3–5 个,用
Promise.allSettled+ 队列控制比Promise.all更稳 - 没监听
onProgressUpdate导致进度条不动,用户以为卡死 —— 即使只是展示百分比,也建议加上
上传单张图的最小可靠调用:
urls
-
urls必须是数组,哪怕只预览一张图也要包成[item.url],否则某些平台(如 iOS App)会静默失败 -
current传字符串 URL 时,内部用===匹配,大小写、末尾斜杠、query 参数差异都会导致定位失败;传数字索引(如index)最稳妥 - 别在
v-for里用局部index直接传 —— 如果列表被过滤或分页,这个index就不是原始数组下标;应传item,再用urls.indexOf(item.url)查索引 - 务必提前过滤掉
null、undefined、空字符串、非图片链接(比如视频地址),否则预览器可能直接中断
安全预览调用示例:
const validUrls = this.images.filter(i => i.url && /\.(jpg|jpeg|png|webp|gif)$/i.test(i.url)).map(i => i.url)<br>if (validUrls.length === 0) return<br>uni.previewImage({<br> urls: validUrls,<br> current: validUrls.indexOf(item.url), // 或直接传 index<br> loop: false // 明确关闭,避免跨端行为不一致<br>})
最易被忽略的一点:iOS 上临时路径有效期可能短于一次完整上传耗时,所以“选完图→点上传→等上传完成→再点预览”这个链路里,预览用的仍是原始 tempPath,此时大概率已失效。真正健壮的做法是上传成功后,用服务端返回的 URL 替换本地 url 字段,并让预览始终基于这个线上地址 —— 临时路径只用于上传,不用于二次渲染。











