移动端h5九宫格多图上传应采用display: grid布局，显式设置三列百分比宽度和grid-gap，配合aspect-ratio保证正方形；js动态补足数组长度但仅渲染有效图片，空项跳过不占dom；「+」按钮独立条件渲染，样式与图片项一致，点击触发uni.chooseimage并自动左对齐。
在移动端 H5 中实现多图上传的九宫格排版，核心是「视觉对齐 + 逻辑补全 + 占位可控」。不能靠空 <view></view> 填充（会干扰 flex 计算），也不能硬写 width: 33.33%（缩放或字体设置下易错位）。关键是用 CSS 控制布局结构，再用 JS 动态补足数量、过滤无效项，让真实图片左对齐、占位符自然隐去。
用 display: grid 实现稳定九宫格
这是最推荐的方式，现代安卓/iOS 微信浏览器（Chrome 内核、WKWebView）全部支持：
- 设容器
display: grid; grid-template-columns: 33.33% 33.33% 33.34%; grid-gap: 8px;—— 百分比显式写死，避免repeat(3, 1fr)在某些缩放下出现列宽偏差 - 每个子项加
aspect-ratio: 1 / 1;，保证正方形；外层包一层<view></view>并设overflow: hidden;，防止图片拉伸变形 - 不依赖
flex-wrap或float，无需清除 nth-of-type 边距，响应更稳
图片数量不足时自动补占位符（不占 DOM 位置）
微博式效果是“有几张显示几张，左对齐，末行不撑满”，不是用 null 或空 div 占位：
- JS 层面补数组：比如已有 5 张图，就补
[...pics, null, null]到长度为 6（3 的倍数），但渲染时只对非空项生成真实<image></image> - 模板中这样写：
v-for="(item, i) in paddedList" :key="i"，然后<view v-if="item"><image :src="item"></image></view>—— 空项直接跳过，不参与布局 - 切忌用
v-else渲染加号图标占位符：那会导致 DOM 节点存在、仍占 grid 格子，破坏左对齐
上传前校验路径 + H5 预览兼容处理
H5 下临时路径（tempFile.tempFilePath）无法被 uni.previewImage 直接调用，必须转换：
- 点击预览前，先过滤掉空值和非字符串项：
const validUrls = tempFilePaths.filter(u => u && typeof u === 'string') - 若需点击放大，H5 必须先上传到 CDN 或本地服务，拿到
https://开头的 URL 才能传给urls数组；小程序/APP 可直传tempFilePath - 传
current参数时，必须是urls数组里的某一项完整字符串（如"https://xxx.jpg"），不能传索引值
添加「+」按钮作为可点击占位（仅当未满 9 张时）
这个按钮不是用来“占格子”，而是用户操作入口，要和真实图片同级渲染、统一尺寸：
- 在
v-for渲染完所有有效图片后，单独加一个条件节点：<view v-if="pics.length < 9" class="add-btn"><uni-icons type="plus"></uni-icons></view> -
.add-btn样式与图片项完全一致（同样aspect-ratio: 1/1、overflow: hidden、同grid-gap），视觉上无缝融入九宫格 - 点击触发
uni.chooseImage，选完后 push 到数组并重排 —— 不需要手动插入到第几个位置，左对齐逻辑由渲染顺序天然保障
