uniapp 上传图片、点击预览图片

比眉伴天荒 2021-07-24 11:07 1743阅读 0赞

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 用户点击按钮列表的索引值
    				
    			})

[文档][Link 1]  
[预览文档][Link 2]

代码示例:

<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>

[Link 1]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[Link 2]: https://uniapp.dcloud.io/api/media/image?id=unipreviewimageobject