完整教程：uniapp | 图片上传的两种实现方式（传统VS组件）

方法一（传统）：

1. UI结构设计

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

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 容器内，便于样式控制

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里面来展示，这其中会有一个一两秒的等待时长，给用户体验感不好，而组件则不会有这个一两秒的延迟展示

posted @ 2025-11-05 09:26 ycfenxi 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部