UNIAPP 实现的复杂功能：图片上传与预览功能（支持多张图片上传、预览和删除）

最新推荐文章于 2026-05-17 09:30:59 发布

原创最新推荐文章于 2026-05-17 09:30:59 发布 · 2.5k 阅读

本内容遵循CC 4.0 BY-SA版权协议

在移动应用中，图片上传是一个常见且实用的功能，尤其是在社交平台、商品发布、个人资料等场景中。UNIAPP 提供了强大的跨平台能力，能够帮助我们实现多张图片上传、预览和删除的功能。本功能将展示如何在 UNIAPP 中实现一个图片上传与预览功能，包括选择图片、上传图片、预览图片和删除已上传的图片。

功能描述

该功能将允许用户：

选择多张图片：从相册或摄像头选择多张图片。
预览图片：点击已选择的图片进行预览。
删除图片：已选择的图片可以被删除。
上传图片：点击上传按钮，将选择的图片上传到服务器。

技术栈

图片选择：通过 UNIAPP 的 chooseImage API 选择图片。
图片预览：通过点击图片显示全屏预览。
图片删除：可以删除已选择的图片。
上传图片：通过 uni.uploadFile API 实现图片上传。

1. 前端代码实现

页面实现

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

    <!-- 选择图片区域 -->
    <view class="upload-section">
      <button @click="chooseImages">{{ $t('chooseImages') }}</button>
    </view>

    <!-- 图片预览和删除 -->
    <view class="image-preview">
      <view v-for="(image, index) in selectedImages" :key="index" class="image-item">
        <image :src="image" mode="aspectFill" @click="previewImage(image)"></image>
        <button class="delete-btn" @click="deleteImage(index)">×</button>
      </view>
    </view>

    <!-- 上传按钮 -->
    <view class="upload-btn">
      <button @click="uploadImages">{{ $t('uploadImages') }}</button>
    </view>

    <!-- 预览图片 -->
    <image-preview :visible="previewVisible" :image="previewImageSrc" @close="closePreview"></image-preview>
  </view>
</template>

<script>
import ImagePreview from '@/components/ImagePreview.vue'; // 自定义预览组件

export default {
  data() {
    return {
      selectedImages: [], // 已选择的图片列表
      previewVisible: false, // 预览框是否可见
      previewImageSrc: '', // 当前预览的图片
    };
  },
  components: {
    ImagePreview
  },
  methods: {
    // 选择图片
    chooseImages() {
      uni.chooseImage({
        count: 9, // 最多选择9张图片
        sizeType: ['original', 'compressed'], // 原图和压缩图
        sourceType: ['album', 'camera'], // 从相册或相机选择
        success: (res) => {
          // 将选择的图片添加到数组中
          this.selectedImages = [...this.selectedImages, ...res.tempFilePaths];
        },
      });
    },

    // 预览图片
    previewImage(image) {
      this.previewImageSrc = image;
      this.previewVisible = true; // 打开预览框
    },

    // 关闭预览框
    closePreview() {
      this.previewVisible = false;
    },

    // 删除图片
    deleteImage(index) {
      this.selectedImages.splice(index, 1); // 删除指定索引的图片
    },

    // 上传图片
    uploadImages() {
      if (this.selectedImages.length === 0) {
        uni.showToast({
          title: this.$t('noImagesToUpload'),
          icon: 'none',
        });
        return;
      }

      uni.showLoading({
        title: this.$t('uploading'),
      });

      // 模拟上传过程
      this.selectedImages.forEach((image, index) => {
        uni.uploadFile({
          url: 'https://example.com/upload', // 上传接口URL
          filePath: image,
          name: 'file',
          success: (res) => {
            if (res.statusCode === 200) {
              uni.showToast({
                title: this.$t('uploadSuccess'),
                icon: 'success',
              });
            } else {
              uni.showToast({
                title: this.$t('uploadFail'),
                icon: 'none',
              });
            }
          },
          fail: () => {
            uni.showToast({
              title: this.$t('uploadFail'),
              icon: 'none',
            });
          },
          complete: () => {
            if (index === this.selectedImages.length - 1) {
              uni.hideLoading();
            }
          },
        });
      });
    },
  },
};
</script>

<style scoped>
.container {
  padding: 20px;
}
.title {
  font-size: 24px;
  margin-bottom: 20px;
}
.upload-section {
  margin-bottom: 20px;
}
.upload-btn {
  margin-top: 20px;
}
button {
  padding: 10px 20px;
  background-color: #007AFF;
  color: white;
  border-radius: 8px;
  border: none;
}
.image-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.image-item {
  position: relative;
  width: 80px;
  height: 80px;
}
.image-item image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.delete-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  text-align: center;
  line-height: 20px;
}
</style>

图片预览组件（`ImagePreview.vue`）

<template>
  <view v-if="visible" class="preview-container" @click="closePreview">
    <image :src="image" mode="aspectFill" class="preview-image" />
  </view>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    image: {
      type: String,
      default: '',
    },
  },
  methods: {
    closePreview() {
      this.$emit('close'); // 触发关闭预览事件
    },
  },
};
</script>

<style scoped>
.preview-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview-image {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}
</style>