uni.chooseImage(options) @chooseimage

# uni.chooseImage(options)

从本地相册选择图片或使用相机拍照

# # Parameters

name	type	required	default	description
options	ChooseImageOptions	YES	-	-

# # ChooseImageOptions Values

name	type	optinal	default	description
count	number	NO	9	最多可以选择的图片张数，app端不限制，微信小程序最多可支持20个。
sizeType	Array<string>	NO	['original','compressed']	original 原图，compressed 压缩图，默认二者都有
sourceType	Array<string>	NO	['album','camera']	album 从相册选图，camera 使用相机，默认二者都有
extension	Array<string>	NO	-	根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。仅H5支持
crop	ChooseImageCropOptions	NO	-	图像裁剪参数，设置后 sizeType 失效。
success	(callback: ChooseImageSuccess) => void	NO	-	成功则返回图片的本地文件路径列表 tempFilePaths
fail	(callback: IMediaError) => void	NO	-	接口调用失败的回调函数
complete	(callback: any) => void	NO	-	接口调用结束的回调函数（调用成功、失败都会执行）

# # ChooseImageCropOptions Values

name	type	optinal	default	description
width	number	YES	-	裁剪的宽度，单位为px，用于计算裁剪宽高比。
height	number	YES	-	裁剪的高度，单位为px，用于计算裁剪宽高比。
quality	number	NO	80	取值范围为1-100，数值越小，质量越低（仅对jpg格式有效）。默认值为80。
resize	boolean	NO	-	是否将width和height作为裁剪保存图片真实的像素值。默认值为true。注：设置为false时在裁剪编辑界面显示图片的像素值，设置为true时不显示。

# # ChooseImageSuccess Values

name	type	optinal	default	description
errSubject	string	YES	-	调用API的名称
errMsg	string	YES	-	描述信息
tempFilePaths	Array<string>	YES	-	图片的本地文件路径列表
tempFiles	any	YES	-	图片的本地文件列表

# # IMediaError Values

name	type	optinal	default	description
errCode	1101001 \| 1101002 \| 1101003 \| 1101004 \| 1101005 \| 1101006 \| 1101007 \| 1101008 \| 1101009 \| 1101010	YES	-	错误码 - 1101001 用户取消 - 1101002 urls至少包含一张图片地址 - 1101003 文件不存在 - 1101004 图片加载失败 - 1101005 未获取权限 - 1101006 图片或视频保存失败 - 1101007 图片裁剪失败 - 1101008 拍照或录像失败 - 1101009 图片压缩失败 - 1101010 其他错误
errSubject	string	YES	-	统一错误主题（模块）名称
data	any	NO	-	错误信息中包含的数据
errMsg	string	YES	-	-

# # chooseImage Compatibility

Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
4.4	√	3.9+	-	-	-

# # See also

chooseImage

Related Bug

# # Example

hello uni-app x

<template>
 <!-- #ifdef APP -->
 <scroll-view style="flex:1">
 <!-- #endif -->
   <view>
     <page-head :title="title"></page-head>
     <view class="uni-common-mt">
       <view class="uni-list">
         <view class="uni-list-cell cell-pd">
           <view class="uni-list-cell-left uni-label">
             图片来源
           </view>
           <view class="uni-list-cell-right" @click="chooseImageSource">
             <text class="click-t">{{sourceType[sourceTypeIndex]}}</text>
           </view>
         </view>

         <view class="uni-list-cell cell-pd">
           <view class="uni-list-cell-left uni-label">
             图片质量
           </view>
           <view class="uni-list-cell-right" @click="chooseImageType">
             <text class="click-t">{{sizeType[sizeTypeIndex]}}</text>
           </view>
         </view>

         <view class="uni-list-cell cell-pd">
           <view class="uni-list-cell-left uni-label">
             数量限制
           </view>
           <view class="uni-list-cell-right">
             <input class="click-t" :value="countIndex+1" type="number" :maxlength="1" @confirm="chooseImageCount" confirm-type="done" />
           </view>
         </view>
         <view class="uni-list-cell cell-pd">
           <view class="uni-list-cell-left uni-label">
             图像裁剪
           </view>
           <view class="uni-list-cell-right">
             <switch :checked="isCrop" @change="switchCrop"></switch>
           </view>
         </view>
         <view ref="cropOptionNode" class="crop-option" :style="{'height':isCrop?'200px':'0px'}">
           <view class="uni-list-cell cell-pd">
             <view class="uni-list-cell-left item_width">
               图片质量(%)
             </view>
             <view class="uni-list-cell-right">
               <input :value="cropPercent" @confirm="cropPercentConfim" type="number" />
             </view>
           </view>
           <view class="uni-list-cell cell-pd">
             <view class="uni-list-cell-left item_width">
               裁剪宽度(px)
             </view>
             <view class="uni-list-cell-right">
               <input :value="cropWidth" @confirm="cropWidthConfim" type="number" />
             </view>
           </view>
           <view class="uni-list-cell cell-pd">
             <view class="uni-list-cell-left item_width">
               裁剪高度(px)
             </view>
             <view class="uni-list-cell-right">
               <input :value="cropHeight" @confirm="cropHeightConfim" type="number" />
             </view>
           </view>
           <view class="uni-list-cell cell-pd">
             <view class="uni-list-cell-left item_width">
               保留原宽高
             </view>
             <view class="uni-list-cell-right">
               <switch :checked="cropResize" @change="cropResizeChange"></switch>
             </view>
           </view>
         </view>
       </view>

       <view class="uni-list list-pd" style="padding: 30rpx;">
         <view class="uni-flex" style="margin-bottom: 20rpx;">
           <view class="uni-list-cell-left">点击可预览选好的图片</view>
           <view style="margin-left: auto;">
             <text class="click-t">{{imageList.length}}/{{countIndex+1}}</text>
           </view>
         </view>
         <view class="uni-flex" style="flex-wrap: wrap;">
           <view v-for="(image,index) in imageList" :key="index" class="uni-uploader__input-box" style="border: 0rpx;">
             <image style="width: 208rpx; height: 208rpx;" :src="image" :data-src="image" @tap="previewImage(index)"></image>
             <image src="/static/plus.png" class="image-remove" @click="removeImage(index)"></image>
           </view>
           <image class="uni-uploader__input-box" @tap="chooseImage" src="/static/plus.png"></image>
         </view>
       </view>
     </view>
   </view>
 <!-- #ifdef APP -->
 </scroll-view>
 <!-- #endif -->
</template>

<script>
 var sourceTypeArray = [
   ['camera'],
   ['album'],
   ['camera', 'album']
 ]
 var sizeTypeArray = [
   ['compressed'],
   ['original'],
   ['compressed', 'original']
 ]
 export default {
   data() {
     return {
       title: 'choose/previewImage',
       imageList: [] as Array<string>,
       sourceTypeIndex: 2,
       sourceType: ['拍照', '相册', '拍照或相册'],
       sizeTypeIndex: 2,
       sizeType: ['压缩', '原图', '压缩或原图'],
       countIndex: 8,
       count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
       isCrop: false,
       cropPercent: 80,
       cropWidth: 100,
       cropHeight: 100,
       cropResize: false
     }
   },
   onUnload() {
     this.imageList = [];
     this.sourceTypeIndex = 2
     this.sourceType = ['拍照', '相册', '拍照或相册']
     this.sizeTypeIndex = 2
     this.sizeType = ['压缩', '原图', '压缩或原图']
     this.countIndex = 8
   },
   methods: {
     cropHeightConfim(e : InputConfirmEvent) {
       let value = parseInt(e.detail.value)
       if (value > 0) {
         this.cropHeight = value
       } else {
         uni.showToast({
           position: "bottom",
           title: "裁剪高度需要大于0"
         })
       }
     },
     cropWidthConfim(e : InputConfirmEvent) {
       let value = parseInt(e.detail.value)
       if (value > 0) {
         this.cropWidth = value
       } else {
         uni.showToast({
           position: "bottom",
           title: "裁剪宽度需要大于0"
         })
       }
     },
     cropPercentConfim(e : InputConfirmEvent) {
       let value = parseInt(e.detail.value)
       if (value > 0 && value <= 100) {
         this.cropPercent = value
       } else {
         uni.showToast({
           position: "bottom",
           title: "请输入0~100之间的值"
         })
       }
     },
     cropResizeChange(e : SwitchChangeEvent) {
       this.cropResize = e.detail.value
     },
     switchCrop(e : SwitchChangeEvent) {
       this.isCrop = e.detail.value
     },
     removeImage(index : number) {
       this.imageList.splice(index, 1)
     },
     chooseImageSource() {
       uni.showActionSheet({
         itemList: ['拍照', '相册', '拍照或相册'],
         success: (e) => {
           this.sourceTypeIndex = e.tapIndex!
         }
       })
     },
     chooseImageType() {
       uni.showActionSheet({
         itemList: ['压缩', '原图', '压缩或原图'],
         success: (e) => {
           this.sizeTypeIndex = e.tapIndex!
         }
       })
     },
     chooseImageCount(event : InputConfirmEvent) {
       let count = parseInt(event.detail.value) - 1
       if (count < 0) {
         uni.showToast({
           position: "bottom",
           title: "图片数量应该大于0"
         })
         return
       }
       this.countIndex = count
     },
     chooseImage: function () {
       // var cropOption:ChooseImageCropOptions|null = this.isCrop ? null : new ChooseImageCropOptions(  )
       if (this.imageList.length >= 9) {
         uni.showToast({
           position: "bottom",
           title: "已经有9张图片了，请删除部分图片之后重新选择"
         })
         return
       }
       uni.chooseImage({
         sourceType: sourceTypeArray[this.sourceTypeIndex],
         sizeType: sizeTypeArray[this.sizeTypeIndex],
         crop: this.isCrop ? { "quality": this.cropPercent, "width": this.cropWidth, "height": this.cropHeight, "resize": this.cropResize } as ChooseImageCropOptions : null,
         count: this.imageList.length + this.count[this.countIndex] > 9 ? 9 - this.imageList.length : this.count[this.countIndex],
         success: (res) => {
           this.imageList = this.imageList.concat(res.tempFilePaths);
         },
         fail: (err) => {
           console.log("err: ", JSON.stringify(err));
         }
       })
     },
     previewImage: function (index : number) {
       uni.previewImage({
         current: index,
         urls: this.imageList
       })
     }
   }
 }
</script>

<style>
 .cell-pd {
   padding: 22rpx 30rpx;
 }

 .click-t {
   color: darkgray;
 }

 .list-pd {
   margin-top: 50rpx;
 }

 .uni-uploader__input-box {
   margin: 10rpx;
   width: 208rpx;
   height: 208rpx;
   border: 2rpx solid #D9D9D9;
 }

 .uni-uploader__input {
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
 }

 .image-remove {
   transform: rotate(45deg);
   width: 50rpx;
   height: 50rpx;
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 25rpx;
   background-color: rgba(200, 200, 200, 0.8);
 }

 .item_width {
   width: 260rpx;
 }

 .crop-option {
   border-top-color: lightgray;
   border-width: 1rpx;
   border-style: solid;
   padding: 20rpx;
   transition: height;
   transition-duration: 300;
 }
</style>