uni-app上传图片，预览

超、凢脫俗 2022-12-23 14:23 201阅读 0赞

## uni-app上传图片，预览 ##

\*\*uni.chooseImage(obj)\*\*上传图片

*  count 上传个数最多默认选择张数是9
 *  `sizeType` 上传的类型  
    – `original` 原图  
    – `compressed` 压缩图
 *  `sourceType` 上传方式  
    – `album` 从相册选取  
    – `camera` 使用相机
 *  `success` 上传成功则返回图片的本地路径列表tempFilePaths
 *  `fail` 失败
 *  `complete` 接口调用结束的回调函数，失败或成功都会执行

>  *  count 值由于在h5平台的表现，由于浏览器的规范只能限制单选或多选，并不能限制数量，在实际的手机浏览器很少有能够支持多选的
>  *  courceType 在H5端对应`input`的`capture`属性,设置为\[`album`\]无效，依然可以使用相机
>  *  可以通过用户授权API来判断是否给应用授予相册或摄像头的权限

#### 上传图片 ####

export default{ 
    		data(){ 
    			return { 
    				imgArr:[]
    			}
    		},
    		methods:{ 
    				chooseImg(){ 
    					console.log('上传图片'),
    					uni.chooseImage({    //上传图片的内置方法
    						count:5, //在h5浏览器限制不住
    						success:res=>{ 
    							// console.log(this)
    							this.imgArr=res.tempFilePaths  //返回的图片路径将他保存到imgArr中
    							//注意这里有两坑，1.这里要使用箭头函数，指向外层，普通函数就指向success这个方法
    							//2.这里的imgArr是数组不能直接绑定到src上面由于第一次我只上传一张图片，没发现这个问题，报错了
    						}
    					})
    				}
    		}
    	}

效果  
![在这里插入图片描述][20201125152348369.png_pic_center]

#### uni.previewImage(obj) 预览图片 ####

*  `current` 就是在新的页面显示你点击的那张图片，也就是放大
 *  `urls` 所有的图片列表
 *  `indicator` 是否显示图片指示器样式  
    –`default`底部圆点指示器  
    – `number`顶部数字指示器  
    – `none`不显示指示器  
    \-`loop`是否可循环预览，默认是false
 *  `longPressActions`长按图片显示操作菜单，如不填默认为保存**相册** 1.9.5起开始支持
 *  `success`接口调用成功的回调函数
 *  `fail`接口调用失败的回调函数
 *  `complete`接口调用结束的回调函数，不管成功或是失败

export default{ 
    		data(){ 
    			return { 
    				imgArr:[]
    			}
    		},
    		methods:{ 
    			chooseImg(){ 
    				console.log('上传图片'),
    				uni.chooseImage({ 
    					count:5, //在h5浏览器限制不住
    					success:res=>{ 
    					// console.log(this)
    					this.imgArr=res.tempFilePaths
    					}
    				})
    			},
    			previewImg(current){ 
    				uni.previewImage({ 
    					current,	//当前的图片路径必填
    					urls:this.imgArr, //数组文件路径必填
    					loop:true,   //循环在5+app才有效
    					indicator:"default" //指数器同样也是5+app有效
    				})
    			}
    		}
    	}

![图片拖动][20201125164748528.png_pic_center]

## uni-app相机API调取 ##

1.  打开项目的 manifest.json -> 找到APP权限模块  
    ![在这里插入图片描述][20201203121256756.png]  
    2.找到里面的安卓配置权限  
    ![在这里插入图片描述][20201203121359935.png]  
    3.找到以下几个权限勾选上  
    相机权限 （必选）  
    ![在这里插入图片描述][202012031214413.png]  
    相册读写权限 （可选）  
    ![在这里插入图片描述][20201203121511968.png]  
    ![在这里插入图片描述][20201203121534197.png]

[20201125152348369.png_pic_center]: /images/20221120/acd75eb6e250426d9821a27c9964607a.png
[20201125164748528.png_pic_center]: /images/20221120/1f971dd37d9f4052a40c99c0660a6c4b.png
[20201203121256756.png]: /images/20221120/72c96abde6814d35897e6611e2922cc3.png
[20201203121359935.png]: /images/20221120/185bcf9dc1ab4d9588743e579f3a17e4.png
[202012031214413.png]: /images/20221120/39d734cc3ff6401b82782b4faf8a0f9e.png
[20201203121511968.png]: /images/20221120/ec1555ee56ad439e99374a1ad79a5866.png
[20201203121534197.png]: /images/20221120/b6d24af49cff41abb5653063ea7c7367.png