uniapp 上传图片、点击预览图片
1、在回调中打开本地相册
uni.chooseImage({
count:上传照片数量, //浏览器无法限制,默认上传数量为9
success:res=> //回调参数包含上传的文件的信息，箭头函数绑定this，若还是报错,其实已经有数据了
{
res.tempFilePaths; 返回一个包含所有上传图片路径的数组
res.tempFiles; 返回一个包含所有图片对象的数组
path 本地文件路径
size 本地文件大小，单位：B
name 包含扩展名的文件名称，仅H5支持
type 文件类型，仅H5支持
}
})
2、预览图片
1、显示在页面上
根据第一步可以获取到图片路径,在image标签中填入即可显示在页面上
2、点击预览(若不是选择文字上传,只需要预览功能,写入url即可)
在点击回调中设置
uni.previewImage({
current:当前点击文件路径/url路径,
urls:所有文件路径的数组/url数组,
以下为仅App有效的参数
indicator 图片指示器样式，可取值："default" - 底部圆点指示器； "number" - 顶部数字指示器； "none" - 不显示指示器。
loop 是否可循环预览，默认值为 false
longPressActions 长按图片显示操作菜单，如不填默认为保存相册
配置信息
itemList 按钮的文字数组
itemColor 按钮的文字颜色，字符串格式，默认为"#000000"
success 接口调用成功的回调函数，详见返回参数说明
回调参数:
index 用户长按图片的索引值
tapIndex 用户点击按钮列表的索引值
})
文档
预览文档
代码示例:
<template>
<view>
<view class='box'>
<image v-for="(item,index) in imgArr" :src='item' :key="index" @click="set(item)"></image>
</view>
<text class='iconfont icon-shipin '></text>
<text class='iconfont'></text>
<button type="primary" @click="get">按钮</button>
<button type='primary' @click='set'>按钮2</button>
<button type='primary' @click='remv'>按钮3</button>
</view>
</template>
<script>
export default{
data()
{
return{
imgArr:['a']
}
},
methods:{
get()
{
uni.chooseImage({
count:5, //浏览器无法限制,默认上传数量为9
success:res=> //回调参数包含上传的文件的信息
{
console.log(res);
this.imgArr=res.tempFilePaths;
console.log(imgArr);
}
})
},
set(item)
{
uni.previewImage({
current:item,
urls:this.imgArr
})
},
remv()
{
}
},
}
</script>
<style scoped>
@import url("../css/a.css");
.box{
height: 1000rpx;
width: 375rpx;
background-color: #4CD964;
}
.box1{
background-color: #007AFF;
}
</style>
单纯的图片预览:
<template>
<view class='pics'>
<scroll-view class='left' scroll-y >
<view :class='number==index?active:""' v-for="(item,index) in tits" :key='index' @click="leftHandle(index)">{{item}}</view>
</scroll-view>
<scroll-view class='right' scroll-y>
<view class='item' v-for="(item,index) in imgs[number]" :key="index">
<image :src="item" @click="prew(index)"></image>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
tits:[
'家居生活',
'摄影设计',
'明星美女',
'空间设计',
'户型装饰',
'广告摄影',
'摄影学习',
'摄影器材',
'明星写真',
'清纯甜美',
'古典美女'
],
number:0,
active:'active',
imgs:[
["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg",
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3104686528,572431609&fm=26&gp=0.jpg",
"https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1830914723,3154965800&fm=26&gp=0.jpg"
],
[
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1710399340,2209933578&fm=26&gp=0.jpg",
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=363114041,1907956863&fm=26&gp=0.jpg"
],
[
"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2283990931,1987737174&fm=26&gp=0.jpg",
"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2382876234,3146277274&fm=26&gp=0.jpg",
"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3397184216,4041463360&fm=26&gp=0.jpg"
]
]
}
},
methods: {
leftHandle(index)
{
this.number=index;
},
prew(index)
{
uni.previewImage({
current:this.imgs[this.number][index],
urls:this.imgs[this.number]
})
}
}
}
</script>
<style lang='scss'>
page{
height: 100%;
}
.pics{
height: 100%;
display: flex;
.left{
width: 200rpx;
height: 100%;
border-right: solid 1px #eee;
view{
height: 120rpx;
line-height: 120rpx;
color: #333;
text-align: center;
border-bottom: solid 1px #eee;
}
.active{
background-color:#FF2A00;
color: #FFF;
}
}
.right{
width: 530rpx;
height: 100%;
margin: 0 auto;
.item{
image{
width: 530rpx;
height: 530rpx;
border-radius: 5px;
}
}
}
}
</style>