uni-app上传图片预览图片

uni-app上传图片预览图片

1.上传图片

  uni.chooseImage方法从本地相册选择图片或使用相机拍照sourceType:[‘album’,‘camera’]。
  详细属性见官方文档
  代码如下：

<template>
	<view>
		<button type="primary" @click="uploadPhoto">上传图片</button>
		<image v-for="(item,index) in imageArr" :src="item" mode="aspectFill" :key="index" @click="previewItem(item)"></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageArr: []
			}
		},
		methods: {
			uploadPhoto() {
				uni.chooseImage({
						count: 6, //默认9
						sourceType:['album','camera'],
						success:  (res) => {
							console.log(res.tempFilePaths);
							this.imageArr = res.tempFilePaths;
						}
				})
			},
			previewItem(current) {
				uni.previewImage({
					current:current,
					urls:this.imageArr,
					indicator: 'number'
				})
			}
		}
	}
</script>

<style>

</style>

  效果如下：

2.预览图片

  代码如下：

			previewItem(current) {
				uni.previewImage({
					current:current,
					urls:this.imageArr,
					indicator: 'number'
				})
			}

  效果如下：