上传图片
uni.chooseImage方法从本地相册选择图片或使用相机拍照。
当点击上传图片时出现选择图片弹窗,如下:
案例代码
<template>
<view>
<button @click="chooseImg" type="primary">上传图片</button>
<view>
<image v-for="item in imgArr" :src="item" :key="index"></image>
</view>
</view>
</template>
<script>
export default {
data () {
return {
imgArr: []
}
},
methods: {
chooseImg () {
uni.chooseImage({
count: 9,
success: res=>{
this.imgArr = res.tempFilePaths
}
})
}
}
}
</script>
预览图片
图片上传成功后点击图片进入预览
结构
<view>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)" :key="item"></image>
</view>
预览图片的方法
previewImg (current) {
uni.previewImage({
urls: this.imgArr,
current
})
}
学习实例
<template>
<view>
<button type="primary" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image>
</view>
</template>
<script>
export default{
data(){
return{
imgArr:[]
}
},
methods:{
chooseImg(){
uni.chooseImage({
count:5,
success:res=>{
this.imgArr=res.tempFilePaths
}
})
},
previewImg(current){
console.log(current)
uni.previewImage({
current,
urls:this.imgArr,
loop:true,
indicator:"number"
})
}
}
}
</script>
<style>
</style>