- 图片的上传和预览
//图片上传
uni.chooseImage
//图片预览
uni.previewImage
//在mesage.vue页面写如下代码
<template>
<view>
<button type="default" @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, //图片数量,浏览器不限,小程序限制5张
success:res=>{
// 获取到页面路径
this.imgArr = res.tempFilePaths
}
})
},
previewImg(current){
console.log(current)
// 预览图片的方法
uni.previewImage({
current, //给每个图片一个路径
urls:this.imgArr //预览所有的图片列表
})
}
}
}
</script>
<style>
</style>
浏览器效果展示 每点击一下图片会出现相应路径 点击进去图片可以进行预览
微信小程序效果
注意:微信小程序最多可以上传5张图片,浏览器不限制上传图片 count参数代表上传的图片