<template>
<view>
<button type="primary" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr" :src="item" mode="widthFix" @click="previewImg(item)" :key="item"></image>
</view>
</template>
<script>
export default{
data(){
return{
imgArr:[]
}
},
methods:{
// 点击上传图片方法
chooseImg(){
uni.chooseImage({
count: 5,
success: res => { // 后台获取到后 再到data里面创建一个数组 到image标签里面循环这个数组依次显示出来
this.imgArr = res.tempFilePaths
}
})
},
// 图片预览功能
previewImg(current){
console.log(current);
uni.previewImage({
current:current,
urls:this.imgArr,
loop:true,
indicator:'number'
})
}
}
}
</script>
<style>
</style>
14.uniapp的图片上传和预览
最新推荐文章于 2024-05-07 17:22:33 发布