第一步
定义一个点击事件
<button type="primary" @click="chosseImg">上传图片</button>
再定义一个空的 变量 用于接收上传成功返回的图片路径 img_url: ''
当用户上传成功在图片标签里将长传成功的数据展示出来
<image v-for="item in img_url" :src='item' @click="preview(item)"></image>
然后就说当用户点击的时候调用官方的上传 API
chosseImg() {
uni.chooseImage({
count: 5, //限制图片上传的数量,做多9张
success: res => { //上传成功的回调
// console.log(res)
this.img_url = res.tempFilePaths //返回的图片路径
console.log(this.img_url)
}
})
},
接下来就是预览的点击事件
/*上传成功预览图片*/
preview(index) {
uni.previewImage({
current: index, //当前点击预览的图片
urls: this.img_url //预览图片的链接
})
}
},
源码
<template>
<view class="content">
<view class="text-area">
<!