UNIAPP 实现的复杂功能：实现一个图片上传与预览功能（支持多图选择与删除）

最新推荐文章于 2025-07-11 11:28:23 发布

原创

最新推荐文章于 2025-07-11 11:28:23 发布 · 1.5k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

在移动应用中，图片上传是一个常见且实用的功能，尤其是在社交类应用、商品管理、评论等场景中，用户经常需要上传和预览图片。本文将介绍如何在 UNIAPP 中实现图片上传与预览功能，支持多图选择、删除以及上传。

功能描述

该功能将允许用户：

选择并预览多张图片。
支持删除已选图片。
用户可以上传选择的图片。
支持选择图片源（相册、拍照等）。

技术栈

图片选择与预览：通过 uni.chooseImage 选择图片，uni.previewImage 预览图片。
图片删除：通过点击删除按钮删除已选择的图片。
上传图片：通过 uni.uploadFile 将图片上传到服务器或云存储。
本地存储：使用 uni.setStorageSync 和 uni.getStorageSync 存储用户已选择的图片，便于在页面刷新后保持选择状态。

1. 前端代码实现

页面实现

<!-- pages/image-upload/image-upload.vue -->
<template>
  <view class="container">
    <view class="title">{
  
  { $t('title') }}</view>

    <!-- 选择图片按钮 -->
    <button @click="chooseImage">{
  
  { $t('chooseImage') }}</button>

    <!-- 图片展示区域 -->
    <view class="image-list">
      <view v-for="(image, index) in imageList" :key="index" class="image-item">
        <image :src="image" mode="aspectFill" class="image-preview" @click="previewImage(index)" />
        <button class="delete-btn" @click="deleteImage(index)">{
  
  { $t('delete') }}</button>
      </view>
    </view>

    <!-- 上传图片按钮 -->
    <button @click="uploadImages" :disabled