全网最全uniapp实现单个用户头像、多个商品图片上传的最全流程和详细代码注解

本文链接：https://blog.csdn.net/man2017/article/details/141461656

UniApp 是一款使用 Vue.js 框架开发多端应用的前端框架，支持开发微信小程序、H5 网页、原生 App 等多种平台的应用。

下面我将为你详细介绍如何使用 UniApp 实现微信小程序中的单个图片上传和多个图片上传的功能。

1. 准备工作

确保你已经安装了 Node.js 和 npm。
安装 HBuilderX 开发工具。
安装 UniApp 插件。
创建一个新的 UniApp 项目。

2. 页面结构与样式

首先，我们来设计一个简单的页面结构，包含上传单个图片和多个图片的功能按钮。

页面结构 (pages/upload/upload.vue)

<template>
  <view class="container">
    <!-- 单个图片上传 -->
    <view class="single-image-upload">
      <view class="upload-btn" @tap="chooseSingleImage">选择图片</view>
      <image v-if="singleImageUrl" :src="singleImageUrl" mode="aspectFit"></image>
    </view>

    <!-- 多个图片上传 -->
    <view class="multi-image-upload">
      <view class="upload-btn" @tap="chooseMultiImages">选择图片</view>
      <view class="image-list">
        <image v-for="(item, index) in multiImageList" :key="index" :src="item" mode="aspectFit" @tap="previewImage(item)">
          <view class="remove-icon" @tap.stop="removeImage(index)">×</view>
        </image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      singleImageUrl: '', // 单个图片的 URL
      multiImageList: [], // 多个图片的 URL 数组
    };
  },
  methods: {
    chooseSingleImage() {
      uni.chooseImage({
        count: 1, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          this.singleImageUrl = res.tempFilePaths[0];
        }
      });
    },
    chooseMultiImages() {
      uni.chooseImage({
        count: 9, // 最多可以选择的图片数量
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          this.multiImageList = [...this.multiImageList, ...res.tempFilePaths];
        }
      });
    },
    removeImage(index) {
      this.multiImageList.splice(index, 1);
    },
    previewImage(url) {
      uni.previewImage({
        current: url, // 当前显示图片的http链接
        urls: this.multiImageList // 需要预览的图片http链接列表
      });
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-btn {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.image-list image {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.remove-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  background-color: red;
  color: white;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  font-size: 12px;
}
</style>

3. 代码详解

单个图片上传:
- 使用 uni.chooseImage 方法选择图片。
- 成功后将临时文件路径赋值给 singleImageUrl。
多个图片上传:
- 同样使用 uni.chooseImage 方法选择图片。
- 成功后将临时文件路径添加到 multiImageList 数组中。
- 使用 removeImage 方法移除已选中的图片。
- 使用 previewImage 方法预览图片。