百度沈阳分公司地址在哪里_无极电影网首页_舆情信息网_网页设计与制作教程

前言

🤟 找工作，来万码优才：👉 #小程序://万码优才/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"><imagev-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;
}