uni-app 从本地项目选择图片或使用相机拍照及图片预览

约定不等于承诺〃 2022-11-25 15:29 1040阅读 0赞

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

uni.chooseImage(OBJECT)

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

App端如需要更丰富的相机拍照API（如直接调用前置摄像头），参考[plus.camera][]

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>count</td> 
   <td>Number</td> 
   <td>否</td> 
   <td>最多可以选择的图片张数，默认9</td> 
   <td>见下方说明</td> 
  </tr> 
  <tr> 
   <td>sizeType</td> 
   <td>Array&lt;String&gt;</td> 
   <td>否</td> 
   <td>original 原图，compressed 压缩图，默认二者都有</td> 
   <td>App、微信小程序、支付宝小程序、百度小程序</td> 
  </tr> 
  <tr> 
   <td>sourceType</td> 
   <td>Array&lt;String&gt;</td> 
   <td>否</td> 
   <td>album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>是</td> 
   <td>成功则返回图片的本地文件路径列表 tempFilePaths</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
   <td>小程序、App</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**Tips**

*  count 值在 H5 平台的表现，基于浏览器本身的规范。目前测试的结果来看，只能限制单选/多选，并不能限制数量。并且，在实际的手机浏览器很少有能够支持多选的。
 *  sourceType 在H5端对应`input`的`capture`属性，设置为`['album']`无效，依然可以使用相机。
 *  可以通过用户授权API来判断用户是否给应用授予相册或摄像头的访问权限[https://uniapp.dcloud.io/api/other/authorize][https_uniapp.dcloud.io_api_other_authorize]
 *  App端如需选择非媒体文件，可在插件市场搜索[文件选择][Link 1]，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。

**注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 [uni.saveFile][]，在应用下次启动时才能访问得到。**

**success 返回参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>tempFilePaths</td> 
   <td>Array&lt;String&gt;</td> 
   <td>图片的本地文件路径列表</td> 
  </tr> 
  <tr> 
   <td>tempFiles</td> 
   <td>Array&lt;Object&gt;、Array&lt;File&gt;</td> 
   <td>图片的本地文件列表，每一项是一个 File 对象</td> 
  </tr> 
 </tbody> 
</table>

**File 对象结构如下**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>path</td> 
   <td>String</td> 
   <td>本地文件路径</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>Number</td> 
   <td>本地文件大小，单位：B</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>String</td> 
   <td>包含扩展名的文件名称，仅H5支持</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>String</td> 
   <td>文件类型，仅H5支持</td> 
  </tr> 
 </tbody> 
</table>

**示例**

uni.chooseImage({
        count: 6, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album'], //从相册选择
        success: function (res) {
            console.log(JSON.stringify(res.tempFilePaths));
        }
    });

## 图片预览 ##

uni.previewImage(OBJECT)

预览图片。

**OBJECT 参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
   <th>平台差异说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>current</td> 
   <td>String/Number</td> 
   <td>详见下方说明</td> 
   <td>详见下方说明</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>urls</td> 
   <td>Array&lt;String&gt;</td> 
   <td>是</td> 
   <td>需要预览的图片链接列表</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>indicator</td> 
   <td>String</td> 
   <td>否</td> 
   <td>图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。</td> 
   <td>App</td> 
  </tr> 
  <tr> 
   <td>loop</td> 
   <td>Boolean</td> 
   <td>否</td> 
   <td>是否可循环预览，默认值为 false</td> 
   <td>App</td> 
  </tr> 
  <tr> 
   <td>longPressActions</td> 
   <td>Object</td> 
   <td>否</td> 
   <td>长按图片显示操作菜单，如不填默认为<strong>保存相册</strong></td> 
   <td>App 1.9.5+</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

**current 参数说明**

> 1.9.5+ 支持传图片在 urls 中的索引值

current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张。**App平台在 1.9.5至1.9.8之间，current为必填。不填会报错**

注意，当 urls 中有重复的图片链接时：

*  传链接，预览结果始终显示该链接在 urls 中第一次出现的位置。
 *  传索引值，在微信/百度/字节跳动小程序平台，会过滤掉传入的 urls 中该索引值之前与其对应图片链接重复的值。其它平台会保留原始的 urls 不会做去重处理。

举例说明：

一组图片 `[A, B1, C, B2, D]`，其中 B1 与 B2 的图片链接是一样的。

*  传 B2 的链接，预览的结果是 B1，前一张是 A，下一张是 C。
 *  传 B2 的索引值 3，预览的结果是 B2，前一张是 C，下一张是 D。此时在微信/百度/字节跳动小程序平台，最终传入的 urls 是 `[A, C, B2, D]`，过滤掉了与 B2 重复的 B1。

**longPressActions 参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>必填</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>itemList</td> 
   <td>Array&lt;String&gt;</td> 
   <td>是</td> 
   <td>按钮的文字数组</td> 
  </tr> 
  <tr> 
   <td>itemColor</td> 
   <td>String</td> 
   <td>否</td> 
   <td>按钮的文字颜色，字符串格式，默认为"#000000"</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用成功的回调函数，详见返回参数说明</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>Function</td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

**success 返回参数说明**

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>Number</td> 
   <td>用户长按图片的索引值</td> 
  </tr> 
  <tr> 
   <td>tapIndex</td> 
   <td>Number</td> 
   <td>用户点击按钮列表的索引值</td> 
  </tr> 
 </tbody> 
</table>

**示例**

// 从相册选择6张图
    uni.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function(res) {
            // 预览图片
            uni.previewImage({
                urls: res.tempFilePaths,
                longPressActions: {
                    itemList: ['发送给朋友', '保存图片', '收藏'],
                    success: function(data) {
                        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                    },
                    fail: function(err) {
                        console.log(err.errMsg);
                    }
                }
            });
        }
        });

**TIPS**

*  在非H5端，previewImage是原生实现的，界面自定义灵活度较低。
 *  插件市场有前端实现的previewImage，性能低于原生实现，但界面可随意定义；插件市场也有适于App端的previewImage原生插件，提供了更多功能。

示例代码：

<template>
    	<view>
    		我的
    		<button type="primary" @click="uploadPictures">上传图片</button>
    		<image v-for="(item,index) in images" :key="index" :src="item" @click="previewPictures(item)"></image>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				images:[]
    				
    			};
    		},
    		onLoad(options) {
    			console.log('页面加载了'+options);
    
    		},
    		onShow() {
    			console.log('页面显示了')
    		},
    		onReady() {
    			console.log('页面初次渲染完成了')
    		},
    		onHide() {
    			console.log('页面隐藏了')
    		},
    		onUnload() {
    			console.log('页面卸载了')
    		},
    		onResize() {
    			console.log('页面窗口尺寸发生变化了')
    		},
    		methods:{
    			uploadPictures() {
    				uni.chooseImage({
    					success:res => {
    						console.log(res)
    						// 将选择的本地图片赋值给data中定义的images变量
    						this.images = res.tempFilePaths;
    						console.log(this.images)
    					}
    				})
    			},
    			/* 
    			图片预览 
    			 */
    			previewPictures(item) {
    				uni.previewImage({
    					current:item,
    					urls:this.images
    				})
    			}
    		}
    	}
    </script>
    
    <style lang="scss">
    	@import url('/pages/me/me.scss')
    
    </style>

效果图：

![20200809223248494.gif][]

[plus.camera]: https://www.html5plus.org/doc/zh_cn/camera.html
[https_uniapp.dcloud.io_api_other_authorize]: https://uniapp.dcloud.io/api/other/authorize
[Link 1]: https://ext.dcloud.net.cn/search?q=%E6%96%87%E4%BB%B6%E9%80%89%E6%8B%A9
[uni.saveFile]: https://uniapp.dcloud.io/api/file/file?id=savefile
[20200809223248494.gif]: /images/20221124/3c9b598c4d3443d49372bf58b4e9136d.png