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来判断是否给应用授予相册或摄像头的权限
上传图片
<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
是否可循环预览,默认是false -
longPressActions
长按图片显示操作菜单,如不填默认为保存相册 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有效
})
}
}
}