应为每张图分配唯一id并存为对象数组,限制并发上传数量,heic需转jpg,删除操作须基于id而非索引,上传前检查文件大小并压缩,缓存需同步清理。

直接上结论:用 uni.chooseImage 拿路径,用 uni.uploadFile 逐张传,删除操作必须基于数组索引或唯一 id 做精准移除——别用 splice 遍历删,也别直接改 tempFilePaths 数组本身。
为什么 uni.chooseImage 返回的路径不能直接存进数组就完事?
因为 tempFilePaths 是只读字符串数组,且每次调用都生成新路径;如果用户反复点“选择图片”,你直接 this.selectedImages.push(...res.tempFilePaths),会导致重复路径堆积、预览错乱、删除时 index 错位。更严重的是,安卓上连续选图可能触发内存警告。
- 正确做法是给每张图分配唯一
id(比如Date.now() + Math.random()),存成对象数组:{ id, path, status: 'pending' } - 限制总数时,用
count: Math.max(1, 9 - this.imageList.length)动态计算,避免 UI 允许选超限但实际被截断 - iOS 用户拍的 HEIC 图片,
uni.chooseImage返回的路径在安卓上无法上传,得提前转成 JPG——别等上传失败才处理
uni.uploadFile 并发上传时怎么防止卡死或失败?
直接 Promise.all(uploadPromises) 是最常见错误:9 张图全开并发,低端机内存爆、服务器限流、进度条全卡在 0%。真实项目里必须加队列控制和重试。
- 用
async/await串行上传(适合小图或弱网场景)或用p-limit控制最多 3 个并发 - 每个
uni.uploadFile必须包try/catch,失败后设status: 'error',不要 throw 出去中断整个流程 - 上传前检查
fileSize:超过 5MB 的图建议先压缩(用uni.compressImage),否则大概率fail: { errMsg: 'uploadFile:fail timeout' } - 服务端返回非 200 时,
res.statusCode不可靠,要解析res.data判断业务错误码
点击图片删除功能为什么总删错?
根本原因是用 v-for="(img, i) in imageList" + @click="remove(i)",但用户删了第 2 张后,原第 3 张变成新第 2 张,再点“删这张”就删错了。这不是 UI 问题,是数据模型缺陷。
- 删除逻辑必须基于
img.id,而不是循环索引:this.imageList = this.imageList.filter(item => item.id !== targetId) - 预览时也别传
index,改传img.id或完整img对象,避免uni.previewImage的urls参数因数组变动而错位 - 如果用了
uni.setStorageSync缓存已选图片,删除后记得同步清理对应 key,否则下次进页面会多出一张“幽灵图”
真正难的不是写通流程,而是处理那些不报错但行为诡异的边界:HEIC 路径在安卓上传 404、用户快速连点两次选择按钮导致临时路径被覆盖、上传中切后台再回来进度条归零……这些不会出现在文档里,但上线后第一个找你的是客服。











