uniapp | 图片上传的两种实现方式（传统VS组件）

方法一（传统）：

1. UI结构设计

• photo-box容器用于展示图片上传区域
• photo-item循环渲染已上传的图片，支持预览和删除功能
• upload-section作为上传入口，当图片数量少于9张时显示

<view class="photo-box">
            <view class="photo-item" v-for="(item, index) in coverImageList" :key="index">
                <image
                    :src="item"
                    mode="aspectFill"
                    class="photo-item-image"
                    @click="previewImage(index)"
                ></image>
                <view class="delete-btn" @click.stop="deleteCoverImage(index)">
                    <text class="delete-icon">×</text>
                </view>
            </view>
            <view class="upload-section" @click="uploadCoverImage" v-if="coverImageList.length < 9">
                <view class="upload-placeholder-small">
                    <text class="upload-icon">+</text>
                    <text class="upload-text">点击上传</text>
                </view>
            </view>
        </view>

2. 图片展示逻辑

• 使用 v-for 遍历 coverImageList 数组展示已上传图片
• 每张图片绑定点击事件 previewImage(index) 实现预览功能
• 右上角删除按钮绑定 deleteCoverImage(index) 方法，支持删除指定图片

3. 核心功能实现

图片上传功能：

使用 uni.chooseMedia API 支持从相册选择或拍