简易分析 uni.chooseImage 拍照上传的基本知识点（附Demo）

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/r6rqmzDaXpYkJZF

基本的介绍也可看官网：uni.chooseImage(options)

以下知识点主要用于学习了解，从实战中出发

1. 基本知识

在Uni-app框架中，uni.chooseImage是一个用于让用户选择图片的API，支持从相册或相机选取图片，并返回选择的图片信息

以下是对其详细分析及Demo示例：

主要参数

参数	类型	是否必填	说明
count	Number	否	允许选择的图片数量，默认20
sizeType	String[]	否	图片尺寸类型
sourceType	String[]	否	图片来源类型
success	Function	否	成功回调函数
fail	Function	否	失败回调函数
complete	Function	否	无论成功与否都会执行的函数

基本的参数详解：

sizeType：图片尺寸，可选’resourceType’值包括：

• 'original'（原图）：选择原尺寸图片
• 'compressed'（压缩图）：选择压缩后的图片，适合上传至网络

sourceType：图片的来源类型，可选值包括：

• 'album'（相册）：从相册选择图片
• 'camera'（相机）：使用相机拍照
  若用户提供多个可选项，会弹出选择来源的界面；反之，若限制来源则直接跳转相应应用

success：选择图片成功后的回调，返回包含图片信息的result对象
fail：选择图片失败时的回调，返回错误信息
complete：无论成功与否，均会执行的回调函数

使用场景

• 相册浏览：允许用户从相册中选择多张图片进行编辑或上传
• 拍摄上传：用户可直接使用相机拍摄图片并上传至服务器
• 图片预览：在上传前预览选中的图片内容，确保无误后提交
• 社交功能：在社交媒体应用中选择并上传用户头像或动态图片

2. Demo

<template>
  <view class="container">
    <!-- 选择图片按钮 -->
    <button class="choose-btn" @click="chooseImage">
      选择图片（最多5张）
    </button>

    <!-- 预览按钮 -->
    <button class="preview-btn" @click="previewImage">
      预览图片
    </button>

    <!-- 图片展示区域 -->
    <view class="image-container">
      <image
          v-for="(image, index) in images"
          :key="index"
          :src="image"
          class="preview-image"
          @click="previewIndex = index"
      ></image>
    </view>
  </view>
</template>

基本的js信息：

export default {
  data() {
    return {
      images: [],
      currentImageIndex: 0
    };
  },
  
  methods: {
    chooseImage() {
      const that = this;
      uni.chooseImage({
        count: 5, // 最多选择5张图片
        sizeType: ['compressed'], // 只选择压缩后的图片
        sourceType: ['album', 'camera'], // 允许从相册或相机选择
        success: function(result) {
          that.images = result.tempFilePaths;
          console.log('选择的图片路径:', result.tempFilePaths);
        },
        fail: function(err) {
          console.error('图片选择失败:', err);
        },
        complete: function() {
          console.log('图片选择操作完成');
        }
      });
    },
    
    previewImage() {
      if (!this.images.length) {
        uni.showToast({
          title: '尚未选择图片',
          icon: 'none'
        });
        return;
      }
      
      uni.previewImage({
        urls: this.images,
        current: this.images[this.currentImageIndex]
      });
    }
  }
};

.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.choose-btn, .preview-btn {
  margin: 10px;
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #007AFF;
  color: white;
  margin-bottom: 20px;
}

.choose-btn:active, .preview-btn:active {
  background-color: #0063CC;
}

.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 600px;
}

.preview-image {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  object-fit: cover;
}