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 支持从相册选择或拍照，限制最多选择9张图片，并逐个上传至服务器。
const uploadCoverImage = () => {uni.chooseMedia({count: 9 - coverImageList.value.length, // 限制最多9张mediaType: ['image'],sizeType: ['original'],sourceType: ['album', 'camera'],success: async (res) => {// 逐个上传图片for (let i = 0; i < res.tempFiles.length; i++) {const result: any = await uploadImage(res.tempFiles[i].tempFilePath)if (result) {coverImageList.value.push(result.uri)} else {uni.showToast({ title: '图片上传失败', icon: 'none' })}}articleData.pic = coverImageList.value},fail: (err) => {console.error('选择图片失败:', err)uni.showToast({ title: '选择图片失败', icon: 'none' })}})
}图片删除功能：
通过模态框确认删除操作，使用数组的 splice 方法移除指定索引的图片，并同步更新表单数据。
const deleteCoverImage = (index: number) => {uni.showModal({title: '提示',content: '确定要删除这张图片吗？',success: (res) => {if (res.confirm) {coverImageList.value.splice(index, 1)articleData.pic = coverImageList.value}}})
}图片预览功能
通过 uni.previewImage API 实现图片全屏预览，current 参数指定当前查看的图片索引
const previewImage = (index: number) => {if (coverImageList.value.length === 0) {uni.showToast({title: '暂无图片',icon: 'none'})return}uni.previewImage({urls: coverImageList.value,current: index})
}4.实现效果：
点击图片后预览效果：
方法二（组件）：
使用uview里面的u-upload组件
Upload 上传 | uView Vue3.0 横空出世，继承uView1.0意志，再战江湖，风云再起！ (fsq.pub)
1. 组件结构
- 使用
u-upload组件实现图片上传功能 - 包装在
upload-section容器内，便于样式控制
<view class="image-list-container"><!-- 上传 --><view class="upload-section"><u-upload:action="action"max-count="9":show-tips="false"upload-text="点击上传"@on-success="handleUploaded"@on-remove="handleRemove"@on-preview="handlePreview":index="Imageindex"></u-upload></view></view>2. 核心配置参数
- action: 指定上传接口地址，绑定 action 响应式变量
max-count: 限制最大上传图片数量为9张show-tips: 设置为false，不显示组件默认提示信息upload-text: 设置上传按钮显示文本为"点击上传"
3. 事件处理机制
@on-success: 图片上传成功时调用 handleUploaded 方法处理返回数据@on-remove: 用户删除图片时调用 handleRemove 方法同步更新数据@on-preview: 用户点击预览图片时调用 handlePreview 方法实现图片预览
4. 事件处理逻辑
上传成功处理:
- 当图片上传成功时触发
- 将服务器返回的图片URL
data.data.uri添加到WeightImageList数组中
const handleUploaded = (data: any, index: any, lists: any, name: any) => {console.log('handleUploaded---->', data, index, lists, name)if (data) {WeightImageList.value.push(data.data.uri)}
}删除图片处理:
- 当用户删除图片时触发
- 从 WeightImageList 数组中移除指定索引的图片
const handleRemove = (index: any, lists: any, name: any) => {console.log('handleRemove---->', index, lists, name)WeightImageList.value.splice(index, 1)
}预览图片处理:
- 当用户点击预览图片时触发
- 当前仅输出日志，可扩展实现图片预览功能
const handlePreview = (url: any, lists: any, index: any) => {console.log('handlePreview---->', url, lists, index)
}5.实现效果
点击预览图片效果：
传统VS组件
使用 u-upload 组件：
- 提供开箱即用的上传功能，减少开发工作量
- 内置UI样式和交互逻辑（上传进度、删除、预览等）
- 通过简单配置即可实现复杂功能
不使用组件：
- 需要手动实现所有上传逻辑和UI交互
- 需要自行处理文件选择、上传进度、错误处理等
- 开发周期长，代码量大
写在最后：
推荐使用u-upload组件，不仅仅是因为开发快速，还因为传统方法实现上传图片，会有一个等待上传的返回时间，并且还要push到对应的lists里面来展示，这其中会有一个一两秒的等待时长，给用户体验感不好，而组件则不会有这个一两秒的延迟展示