Uniapp图片上传的两种实现方式详解

更新时间：2025年10月11日 08:53:58 作者：jingling1007

UniApp是一个跨平台的前端框架,它允许开发者使用一套代码构建同时运行在微信小程序、H5、iOS、Android等多个平台的应用,在UniApp中,上传图片通常涉及到使用其提供的File API或者第三方插件来进行操作,所以本文给大家介绍了Uniapp图片上传的两种实现方式

方法一（传统）：

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组件(https://vkuviewdoc.fsq.pub/components/upload.html)

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

以上就是Uniapp图片上传的两种实现方式详解的详细内容，更多关于Uniapp实现图片上传的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue3中的抽离封装方法实现
vue3中的任何一个组合式api都可以单独抽离出去在另一个文件，最后只需要回归到setup()中即可，这篇文章主要介绍了vue3的抽离封装方法,需要的朋友可以参考下
2022-08-08
在vue项目中使用md5加密的方法
这篇文章主要介绍了在vue项目中使用md5加密的方法,需要的朋友可以参考下
2018-09-09
Django Vue实现动态菜单和动态权限
本文主要介绍了Django Vue实现动态菜单和动态权限，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
基于vue 开发中出现警告问题去除方法
下面小编就为大家分享一篇基于vue 开发中出现警告问题去除方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
基于vue实现圆形菜单栏组件
这篇文章主要介绍了基于vue实现的圆形菜单栏组件，本文通过实例代码，图文详解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
VUE中如何渲染Echarts动画柱状图
这篇文章主要介绍了VUE中如何渲染Echarts动画柱状图问题，具有很好的参考价值，希望对大家有所帮助。
2023-03-03
Pure admin-Router标签页配置与页面持久化实现方法详解
这篇文章主要介绍了Pure admin-Router标签页配置与页面持久化实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2023-01-01
关于el-table表格组件中插槽scope.row的使用方式
这篇文章主要介绍了关于el-table表格组件中插槽scope.row的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue cli3中eslint报错no-undef和eslint规则配置方式
这篇文章主要介绍了vue cli3中eslint报错no-undef和eslint规则配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
vue2+elementUI实现下拉树形多选框效果实例
这篇文章主要给大家介绍了关于vue2+elementUI实现下拉树形多选框效果的相关资料,这是最近的工作中遇到的一个需求,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-07-07