uni-app上传图片，预览
**uni.chooseImage(obj)**上传图片
- count 上传个数最多默认选择张数是9
sizeType上传的类型
–original原图
–compressed压缩图sourceType上传方式
–album从相册选取
–camera使用相机success上传成功则返回图片的本地路径列表tempFilePathsfail失败complete接口调用结束的回调函数，失败或成功都会执行
- count 值由于在h5平台的表现，由于浏览器的规范只能限制单选或多选，并不能限制数量，在实际的手机浏览器很少有能够支持多选的
- courceType 在H5端对应
input的capture属性,设置为[album]无效，依然可以使用相机- 可以通过用户授权API来判断是否给应用授予相册或摄像头的权限
上传图片
<view>
<button type="warn" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" mode=""></image>
</view>
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上面由于第一次我只上传一张图片，没发现这个问题，报错了
}
})
}
}
}
效果
uni.previewImage(obj) 预览图片
current就是在新的页面显示你点击的那张图片，也就是放大urls所有的图片列表indicator是否显示图片指示器样式
–default底部圆点指示器
–number顶部数字指示器
–none不显示指示器
-loop是否可循环预览，默认是falselongPressActions长按图片显示操作菜单，如不填默认为保存相册 1.9.5起开始支持success接口调用成功的回调函数fail接口调用失败的回调函数complete接口调用结束的回调函数，不管成功或是失败
<view>
<button type="warn" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" mode="" @click="previewImg(item)"></image>
</view>
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有效
})
}
}
}
uni-app相机API调取
- 打开项目的 manifest.json -> 找到APP权限模块
2.找到里面的安卓配置权限
3.找到以下几个权限勾选上
相机权限 （必选）
相册读写权限 （可选）
